scroll-view

2024-07-23 07:35

Scroll view region

Property	Type	Default	Description
class	String		External style name.
style	String		Inline style name.
scroll-x	Boolean	false	Allow horizontal scroll.
scroll-y	Boolean	false	Allow vertical scroll.
upper-threshold	Number	50	How far it is to top/left (in px) to trigger the scrolltoupper event.
lower-threshold	Number	50	How far it is to bottom/right (in px) to trigger the scrolltolower event.
scroll-top	Number		Set location of virtical scroll bar.
scroll-left	Number		Set location of horizontal scroll bar.
scroll-into-view	String		Value is an element ID, scrolling to that element, element top aligning with scroll region top.
onScrollToUpper	EventHandle		Scroll to top/left triggers the scrolltoupper event.
onScrollToLower	EventHandle		Scroll to bottom/right triggers the scrolltolower event.
onScroll	EventHandle		Trigger on scroll, event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth}.

When vertical scroll is used, a fixed height is required, which is set by using acss.

Sample Code

copy
<view class="page">
  <view class="page-description">Scroll view region</view>
  <view class="page-section">
    <view class="page-section-title">vertical scroll</view>
    <view class="page-section-demo">
      <scroll-view scroll-y="{{true}}" style="height: 200px;" onScrollToUpper="upper" onScrollToLower="lower" onScroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
        <view id="blue" class="scroll-view-item bc_blue"></view>
        <view id="red"  class="scroll-view-item bc_red"></view>
        <view id="yellow" class="scroll-view-item bc_yellow"></view>
        <view id="green" class="scroll-view-item bc_green"></view>
      </scroll-view>
    </view>
    <view class="page-section-btns">
      <view onTap="tap">next</view>
      <view onTap="tapMove">move</view>
      <view onTap="scrollToTop">scrollToTop</view>
    </view>
  </view>
  <view class="page-section">
    <view class="page-section-title">horizontal scroll</view>
    <view class="page-section-demo">
      <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%" >
        <view id="blue2" class="scroll-view-item_H bc_blue"></view>
        <view id="red2"  class="scroll-view-item_H bc_red"></view>
        <view id="yellow2" class="scroll-view-item_H bc_yellow"></view>
        <view id="green2" class="scroll-view-item_H bc_green"></view>
      </scroll-view>
    </view>
  </view>
</view>

copy
const order = ['blue', 'red', 'green', 'yellow'];
Page({
  data: {
    toView: 'red',
    scrollTop: 100,
  },
  upper(e) {
    console.log(e);
  },
  lower(e) {
    console.log(e);
  },
  scroll(e) {
    console.log(e.detail.scrollTop);
  },
  scrollToTop(e) {
    console.log(e);
    this.setData({
      scrollTop: 0,
    });
  },
});

Tips

scroll-into-view has a higher priority than scroll-top

Prevent page kickback in scroll scroll-view, so the scroll in scroll-view will not trigger onPullDownRefresh