本文編輯：  明日創意科技有限公司瀏覽 14373 5 版權所有，嚴禁轉載

組件說明:

可滾動視圖區域。

組件用法：

縱向滾動用法

Tip:

1. 使用豎向滾動時，需要給一個固定高度，通過 WXSS 設置 height，否則無法滾動。
2. 當滾動到頂部時會觸發bindscrolltoupper事件（具體可留意GIF輸出）
3. 當滾動到底部時會觸發bindscrolltolower事件（具體可留意GIF輸出）

效果圖：

wxml

<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red"  class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>
<view class="btn-area">
      <button size="mini" bindtap="tap">click me to scroll into view </button>
      <button size="mini" bindtap="tapMove">click me to scroll</button>
</view>

js

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'green',
    scrollTop: 100,
    scrollLeft: 0
  },
  //滾動條滾到頂部的時候觸發
  upper: function(e) {
    console.log(e)
  },
  //滾動條滾到底部的時候觸發
  lower: function(e) {
    console.log(e)
  },
  //滾動條滾動后觸發
  scroll: function(e) {
    console.log(e)
  },
  //點擊按鈕切換到下一個view
  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  //通過設置滾動條位置實現畫面滾動
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

css

.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 200px;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}

橫向滾動用法

Tip:

1. 橫向滾動無法使用scroll-into-view屬性。
2. 當滾動到最左邊時會觸發bindscrolltoupper事件（具體可留意GIF輸出）
3. 當滾動到最右邊時會觸發bindscrolltolower事件（具體可留意GIF輸出）

效果圖：

wxml

<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"  bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"  scroll-left="{{scrollLeft}}">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red"  class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
</scroll-view>

js

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'green',
    scrollTop: 100,
    scrollLeft: 0
  },
  //滾動條滾到頂部的時候觸發
  upper: function(e) {
    console.log(e)
  },
  //滾動條滾到底部的時候觸發
  lower: function(e) {
    console.log(e)
  },
  //滾動條滾動后觸發
  scroll: function(e) {
    console.log(e)
  },
  //點擊按鈕切換到下一個view
  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  //通過設置滾動條位置實現畫面滾動
  tapMove: function(e) {
    this.setData({
      scrollLeft: this.data.scrollLeft + 10
    })
  }
})

wxss

.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 200px;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}

主要屬性：