微信小程序scroll-view實現按頁滾動

1.wxml

 <scroll-view class="scroll-view_H" scroll-x style="width: 100%" scroll-into-view="{{toView}}" scroll-left="{{scrollTop}}" bindscrolltoupper="upper" bindscrolltolower="lower"   bindtouchstart="onTouchstartArticles" bindtouchend="onTouchendArticles" >
    <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>

2.js

Page({

  /**
   * 頁面的初始數據
   */
  data: {
     toView:"green",
     scrollTop:0,
     startTouchs: {
       x: 0,
       y: 0
     }
  },

upper:function(e){
  console.log(e),
  console.log("在深圳只有不斷的向前跑才能看見自己的出路")
},

lower:function(e){
  console.log(e),
    console.log("你不努力誰替你堅強")

  
},

scroll:function(e){
  console.log(e),
  console.log("可是回家又能做些什么呢")
},

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

  滾動條樣式修改（滾動條隱藏）

::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}