scroll-view

可滚动视图区域。

属性名类型默认值说明最低版本
scroll-xBooleanfalse设置为横向滚动
scroll-yBooleanfalse设置为竖向滚动
upper-thresholdNumber50距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-thresholdNumber50距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-topNumber设置竖向滚动条位置
scroll-leftNumber设置横向滚动条位置
scroll-into-viewString值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animationBooleanfalse在设置滚动条位置时使用动画过渡
bindscrollEventHandler滚动时触发
bindscrolltoupperEventHandler滚动到顶部/左边
bindscrolltolowerEventHandler滚动到底部/右边
- 使用竖向滚动时，需要给一个固定高度，通过 ttss 设置 height。 - scroll-into-view只能包含[-_a-zA-Z0-9]

示例

  1. <view class="page-section-title">
  2.     <text>Vertical Scroll\n纵向滚动</text>
  3. </view>
  5. <scroll-view style="height: 300rpx;"
  6.     scroll-y
  7.     scroll-with-animation
  8.     bindscrolltoupper="upper"
  9.     bindscrolltolower="lower"
  10.     bindscroll="scroll"
  11.     scroll-into-view="{{toView}}"
  12.     scroll-top="{{scrollTop}}"
  13. >
  14.   <view id="demo1" class="scroll-view-item demo-text-1"></view>
  15.   <view id="demo2"  class="scroll-view-item demo-text-2"></view>
  16.   <view id="demo3" class="scroll-view-item demo-text-3"></view>
  17. </scroll-view>
  19. <button bindtap="tap">Scroll into</button>
  20. <button bindtap="tapMove">Move</button>
  22. <view class="page-section-title">
  23.     <text>Horizontal Scroll\n横向滚动</text>
  24. </view>
  26. <scroll-view class="scroll-view_H" scroll-x style="width: 100%">
  27.     <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
  28.     <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
  29.     <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
  30. </scroll-view>
  2. var order = ['demo1', 'demo2', 'demo3']
  3. Page({
  4.   data: {
  5.     toView: 'demo1',
  6.     scrollTop: 0,
  7.   },
  8.   upper: function(e) {
  9.     console.log(e)
  10.   },
  11.   lower: function(e) {
  12.     console.log(e)
  13.   },
  14.   scroll: function(e) {
  15.     console.log(e)
  16.   },
  17.   tap: function(e) {
  18.     for (var i = 0; i < order.length; ++i) {
  19.       if (order[i] === this.data.toView) {
  20.         this.setData({
  21.           toView: order[i < order.length - 1 ? i + 1 : 0],
  22.         })
  23.         break
  24.       }
  25.     }
  26.   },
  27.   tapMove: function(e) {
  28.     this.setData({
  29.       scrollTop: this.data.scrollTop + 20
  30.     })
  31.   }
  32. })

scroll-view - 图1

原文: https://developer.toutiao.com/docs/comp/scroll-view.html