scroll-view
Scroll view region.
Attribute Name | Type | Default | Description | Minimum Version |
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 elememt 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 veritical 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