微信小程序滚动动画,微信小程序全屏动画滚动

2020-09-27

导读：本帖最后由 ewos 于 2017-4-26 15:12 编辑微信小程序全屏动画滚动 GIF.gif (117.81 KB, 下载次数: 11) 下载附件保存到相册 2017-4-26 15:10 上传 Page({ data: { scrollindex:0,//当前页面的索引值 totalnum:5,/...

微信小程序全屏动画滚动

Page({
data: {
scrollindex:0, //当前页面的索引值
totalnum:5, //总共页面数
starty:0, //开始的位置x
endy:0, //结束的位置y
critical: 100, //触发翻页的临界值
margintop:0, //滑动下拉距离
},
onLoad: function () {
},
scrollTouchstart:function(e){
let py = e.touches[0].pageY;
this.setData({
starty: py
})
},
scrollTouchmove:function(e){
let py = e.touches[0].pageY;
let d = this.data;
this.setData({
endy: py,
})
if(py-d.starty<100 && py-d.starty>-100){
this.setData({
margintop: py - d.starty
})
}
},
scrollTouchend:function(e){
let d = this.data;
if(d.endy-d.starty >100 && d.scrollindex>0){
this.setData({
scrollindex: d.scrollindex-1
})
}else if(d.endy-d.starty <-100 && d.scrollindex<this.data.totalnum-1){
this.setData({
scrollindex: d.scrollindex+1
})
}
this.setData({
starty:0,
endy:0,
margintop:0
})
},
})

第二部分：如何开通一个小商店