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

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

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

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

 
  horizontal scroll
  
    
    
    
    
  

     
    click me to scroll into view 
    click me to scroll
     

• 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 来进行页面得切换