字节跳动小程序开发组件文档 scroll-view

可滚动视图区域。

使用竖向滚动时，需要给一个固定高度，通过 ttss 设置 height。scroll-into-view只能包含[-_a-zA-Z0-9]

WARNING
不能在scroll-view中使用video、textarea、ad等原生组件 为了保证用户体验，在scroll-view中滚动时不会触发页面回弹，所以不能触发onPullDownRefresh

示例

开发者工具中预览

<view class="page-section-title">
    <text>Vertical Scroll\n纵向滚动</text>
</view>

<scroll-view style="height: 300rpx;"
    scroll-y
    scroll-with-animation
    bindscrolltoupper="upper"
    bindscrolltolower="lower"
    bindscroll="scroll"
    scroll-into-view="{{toView}}"
    scroll-top="{{scrollTop}}"
>
  <view id="demo1" class="scroll-view-item demo-text-1"></view>
  <view id="demo2"  class="scroll-view-item demo-text-2"></view>
  <view id="demo3" class="scroll-view-item demo-text-3"></view>
</scroll-view>

<button bindtap="tap">Scroll into</button>
<button bindtap="tapMove">Move</button>

<view class="page-section-title">
    <text>Horizontal Scroll\n横向滚动</text>
</view>

<scroll-view class="scroll-view_H" scroll-x style="width: 100%">
    <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
    <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
    <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
</scroll-view>

var order = ['demo1', 'demo2', 'demo3']
Page({
  data: {
    toView: 'demo1',
    scrollTop: 0,
  },
  upper: function(e) {
    console.log(e)
  },
  lower: function(e) {
    console.log(e)
  },
  scroll: function(e) {
    console.log(e)
  },
  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i < order.length - 1 ? i + 1 : 0],
        })
        break
      }
    }
  },
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 20
    })
  }
})