微信小程序页面滑动事件
需求:
微信小程序首页右顶部有个好物榜单,是伸开状态,当用户再首页滑动的时候,好物榜单图片就会缩回去,停止滑动过几秒又会展开状态。难点停止滑动后,再次滑动,这种中途不能展开保持一直缩回去状态。
展开和缩回去是根据变量显示不同的两个图片。
然后再index.js写三个事件处理函数:
//滑动开始事件
handletouchtart: function (event) {
let app = this;
console.log("滑动开始");
},
//滑动结束事件
handletouchend: function (event) {
let app = this;
console.log("滑动结束");
app.setData({
timer1: setTimeout(function () {
//如果当前是1,则改为0
app.setData({
is_move: 0,
})
}, 1000),
})
},
//滑动移动事件
handletouchmove: function (event) {
let app = this;
//console.log(app.data.timer1);
console.log("滑动中");
if (typeof (app.data.timer1) != "undefined") {
clearTimeout(app.data.timer1);
}
setTimeout(function () {
app.setData({
is_move: 1,
})
}, 1);
},
代码解析:
滑动开始事件里面不做任何处理,滑动中的时候app.data.timer1如果存在,则清空掉定时器,然后把is_move改为1,让图片缩回去。滑动结束事件设定一个定时器,1s后把is_move改为0,让图片再伸出来。同时把定时器的返回值赋值给data里面的time1,方便短时间内再次检测到滑动,销毁定时器,让图片不在伸缩出来。
版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。
本文链接:微信小程序页面滑动事件 - http://www.wlphp.com/?post=376