微信小程序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 })},

 

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

相关文章