字節(jié)跳動(dòng)小程序開發(fā)組件文檔 scroll-view

可滾動(dòng)視圖區(qū)域。

使用豎向滾動(dòng)時(shí)，需要給一個(gè)固定高度，通過 ttss 設(shè)置 height。scroll-into-view只能包含[-_a-zA-Z0-9]

WARNING
不能在scroll-view中使用video、textarea、ad等原生組件 為了保證用戶體驗(yàn)，在scroll-view中滾動(dòng)時(shí)不會(huì)觸發(fā)頁面回彈，所以不能觸發(fā)onPullDownRefresh

示例

開發(fā)者工具中預(yù)覽

<view class="page-section-title">
    <text>Vertical Scroll\n縱向滾動(dòng)</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橫向滾動(dòng)</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
    })
  }
})