Scroll view-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

The scrollable view area.

Attributes

Attribute	Type	Default value	Description	Minimum version
class	String	-	External style name	-
style	String	-	Inline style name	-
scroll-x	Boolean	false	Allow horizontal scrolling	-
scroll-y	Boolean	false	Allow vertical scrolling	-
upper-threshold	Number	50	How far from the top/left (in px) does it take to trigger the scrolltoupper event	-
lower-threshold	Number	50	The distance from the bottom/right side (in px) when the scrolltolower event is triggered	-
scroll-top	Number	-	Set the vertical scroll bar position	-
scroll-left	Number	-	Set the horizontal scroll bar position	-
scroll-into-view	String	-	The value should be a child element ID, then scroll to that element and align the top of the element to the top of the scroll area	-
scroll-with-animation	Boolean	false	Use animated transitions when setting the scroll bar position	-
scroll-animation-duration	Number	-	When `scroll-with-animation` is set to `true`, you can set `scroll-animation-duration` to control the execution time of the animation in milliseconds	1.9.0
enable-back-to-top	Boolean	false	When you click the top status bar of iOS or double-click the title bar of Android, the scroll bar returns to the top, only supporting vertical direction	1.11.0
trap-scroll	Boolean	false	When scrolling vertically, when scrolling to the top or bottom, the page scrolling is forcibly prohibited, and only the scroll-view itself is scrolled	1.11.2
onScrollToUpper	EventHandle	-	Scrolling to the top/left will trigger the scrolltoupper event	-
onScrollToLower	EventHandle	-	Scrolling to the bottom/right will trigger the scrolltolower event	-
onScroll	EventHandle	-	Trigger when scrolling, `event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth}`	-
onTouchStart	EventHandle	-	Touch action to start	1.15.0
onTouchMove	EventHandle	-	Move after touch	1.15.0
onTouchEnd	EventHandle	-	Touch action ends	1.15.0
onTouchCancel	EventHandle	-	Touch actions are interrupted by incoming call reminders and pop-up windows	1.15.0

Note

When using vertical scrolling, you need to set a fixed height via ACSS.

Code sample

<view class="page">
  <view class="page-description">Scroll view area</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>

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.
Since scrolling scroll-view prevents page bounce, so onPullDownRefresh will not be triggered when scrolling with scroll-view.