微信小程序scroll-view实现按页滚动

Posted 2020-11-25 shuihanxiao

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