Movable view area.
Attribute | Type | Default value | Description | Minimum version |
---|---|---|---|---|
class | String | - | External style name. | - |
style | String | - | Inline style name. | - |
scroll-x | Boolean | false | Horizontal scroll allowed. | - |
scroll-y | Boolean | false | Vertical scroll allowed. | - |
upper-threshold | Number | 50 | Distance from the top/left (in px) when the scrolltoupper event is triggered. | - |
lower-threshold | Number | 50 | Distance from the bottom/right (in px) when the scrolltolower event is triggered. | - |
scroll-top | Number | - | Position of the vertical scroll bar. | - |
scroll-left | Number | - | Position of the horizontal scroll bar. | - |
scroll-into-view | String | - | The value is a child element ID. When the element is scrolled to, the top of the element is aligned with the top of the scroll area. | - |
scroll-with-animation | Boolean | false | Transition animations are used when the scroll bar position is set. | - |
scroll-animation-duration | Number | - | When scroll-with-animation is set to true, scroll-animation-duration can be set to control the execution time of the animation. The value is in ms. |
1.9.0 |
enable-back-to-top | Boolean | false | When you tap the status bar at the top in iOS or double-tap the title bar in Android, the scroll bar returns to the top. Only vertical scroll is supported. | 1.11.0 |
trap-scroll | Boolean | false | For vertical scroll, when the scroll bar scrolls to the top or bottom, page scrolling is prohibited forcibly. Only the scroll of scroll-view can be triggered. | 1.11.2 |
onScrollToUpper | EventHandle | - | The scrolltoupper event is triggered when the scroll bar scrolls to the top/left. | - |
onScrollToLower | EventHandle | - | The scrolltolower event is triggered when the scroll bar scrolls to the bottom/right. | - |
onScroll | EventHandle | - | Triggered when scrolling. event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth} |
- |
onTouchStart | EventHandle | - | Start the touch action. | 1.15.0 |
onTouchMove | EventHandle | - | Move after the touch action. | 1.15.0 |
onTouchEnd | EventHandle | - | End the touch action. | 1.15.0 |
onTouchCancel | EventHandle | - | Tapping action interrupted by call reminder or pop-up window. | 1.15.0 |
Note: When using vertical scroll, you need to specify a fixed height. You can use acss to set the height.
Code sample
<view class="page">
<view class="page-description">The scrollable 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,
});
},
});
Note
- The priority of
scroll-into-view
is higher than that ofscroll-top
. - The page is prevented from rebounding when
scroll-view
is scrolled. Therefore,onPullDownRefresh
cannot be triggered when scroll happens inscroll-view
.