scroll-view

基礎(chǔ)庫(kù) 1.0.0 開(kāi)始支持本組件。

可滾動(dòng)視圖區(qū)域，可實(shí)現(xiàn)橫向滾動(dòng)和豎向滾動(dòng)。使用豎向滾動(dòng)時(shí)，需要給定一個(gè)固定高度，可以通過(guò) ttss 來(lái)設(shè)置 height。

屬性說(shuō)明

效果示例

代碼示例

<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
    });
  }
});

Bug & Tip

• Tip: 在 iOS13.1 中，使用 bindscrolltolower 事件向 scroll-view 組件中添加子元素時(shí)，該組件會(huì)回到 scrollTop 為 0 的位置。將 scroll-view 組件的全部子元素包裹一層 view 可避免該問(wèn)題。
• Tip: 在 scroll-view 中滾動(dòng)無(wú)法觸發(fā) onPullDownRefresh。