一.知識點

使用豎向滾動時，需要給<scroll-view/>一個固定高度，通過 WXSS 設定 height。

1.index.wxml

<view class="section">
  <view class="section__title">vertical scroll豎直方向</view>
  <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="tapMove">click me to scroll</button>
  </view>
</view>
 

.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 200px;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}
#green{
	background:green;
}
#red{
	background:red;
}
#yellow{
	background:yellow;
}
#blue{
	background:blue;
}

index.js

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'green',
    scrollTop: 100,
    scrollLeft: 0
  },
  //滾動條滾到頂部的時候觸發
  upper: function(e) {
    console.log("頂部");
  },
  //滾動條滾到底部的時候觸發
  lower: function(e) {
    console.log("底");
  },
  //滾動條滾動後觸發
  scroll: function(e) {
    console.log("滾動");
  },
  //通過設定滾動條位置實現畫面滾動
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})
 

感覺手冊上的事列用起來有點問題，你們呢？如果是我的問題歡迎指出來