如何实现小程序Scroll-view的按页跳转

1 . 首先我们先了解 scroll-view的相关属性

• scroll-into-view 值为某子元素id 则滚动到该元素
• 实现代码
• wxml 中的代码

 <view class="section section_gap">
  <view class="section__title">horizontal scroll</view>
  <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>

     <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> 

</view>

• wxss中的代码

.scroll-view-item{
  height: 80px;
  width: 100px;
  display: inline-block;
}
.section{
width: 100%;
height: 800rpx;
overflow: hidden;
padding: 20rpx;
background: #fff;
white-space: nowrap;
}


.bc_green{
  background-color: green ;
}
.bc_red{
    background-color: red ;

}
.bc_yellow{
  background-color: yellow ;
}
.bc_blue{
  background-color: blue ;
}
.bc_orange{
  background-color: orange ;
}

.page-section-center{
  display: flex;
  justify-content: center;
}
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 200px;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}
.flex-wrp{
    height: 200px;
    display: flex;
    background-color: #ffffff;
}
.btn-area{
  height: 100rpx;
  width: 100%;
  display: flex;
  flex-direction: column;

}

• js中的实现

  
var order = ['green', 'red', 'yellow', 'blue']

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

• 微信小程序scroll-view中分页的实现和iOS中实现有很大区别，iOS中分页滑动设置分页属性即可进行分页滑动，而微信小程序需要通过更改页面的id 来进行页面得切换