对微信小程序页面滑动事件为例

微信小程序页的幻灯片事件

W



{ { }



Wxss：


{。球
盒子的影子：2px 2px 10px # AAA；
边界半径：20px；
位置：绝对；
}


Js：



页（{
数据：{
lastx：0 / x的位置开始下滑
最后：0 / Y位置开始下滑
文本：没有滑动
currentgesture：0 /手势识别
}，
滑动事件
handletouchmove：功能（事件）{
无功currentx =事件。触动{ 0 }。pagex
VaR盾=事件。触动{ 0 }。pagey
VaR Tx = currentx - this.data.lastx
VaR即盾- this.data.lasty
var text
关于/幻灯片
如果（Math.abs（TX）、Math.abs（TY））{
如果（TX < 0）
文本向左滑动
否则如果（TX > 0）
文本右下滑
}
上下滑动方向
{其他
如果（0）
文本向上滑动
否则如果（0）
文本
}

当前坐标存储在中以供下一次计算。
this.data.lastx = currentx
this.data.lasty =盾
this.setdata（{
文本：文本，
}）；
}，

滑动启动事件
Handletouchtart：功能（事件）{
this.data.lastx =事件。触动{ 0 }。pagex
this.data.lasty =事件。触动{ 0 }。pagey
}，
滑动结束事件
Handletouchend：功能（事件）{
this.data.currentgesture = 0；
this.setdata（{
文本：没有滑动
}）；
}，
}）


如果您有任何问题，请在本站留言或与社区交谈。谢谢你的阅读。我希望你能帮助你。感谢您对本站的支持。