支付宝小程序组件 可滚动视图区域·Scroll View
支付宝小程序可滚动视图区域。
[TOC]
API
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| class | String | - | 外部样式名 |
| style | String | - | 内联样式名 |
| scroll-x | Boolean | false | 允许横向滚动 |
| scroll-y | Boolean | false | 允许纵向滚动 |
| upper-threshold | Number | 50 | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |
| lower-threshold | Number | 50 | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |
| scroll-top | Number | - | 设置竖向滚动条位置 |
| scroll-left | Number | - | 设置横向滚动条位置 |
| scroll-into-view | String | - | 值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部 |
| scroll-with-animation | Boolean | false | 在设置滚动条位置时使用动画过渡 |
| onScrollToUpper | EventHandle | - | 滚动到顶部/左边，会触发 scrolltoupper 事件 |
| onScrollToLower | EventHandle | - | 滚动到底部/右边，会触发 scrolltolower 事件 |
| onScroll | EventHandle | - | 滚动时触发，event.detail = {scrollLeft,scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
使用竖向滚动时，需要给一个固定高度，通过 acss 设置 height。
示例代码
可滚动视图区域
vertical scroll
next
move
scrollToTop
horizontal scroll
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 的优先级高于 scroll-top
- 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
