微信小程序如何在 wx:for 中判断页面跳转
100
2024-10-09
本文主要介绍微信小程序实现按钮滑动的方法,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下,希望能帮助到大家。
微信小程序 按钮滑动的实现方法
一.先看东西
滑动后
二.再上代码
index.wxml
index.wxss
index.js
三.顺便说说
1.按钮滑动事件
bindtouchstart //按钮开始滑动
bindtouchend //按钮结束滑动
bindtouchmove //按钮正在滑动
在按钮开始滑动是记录开始的位置
滑动结束时要判断按钮是否已经滑动到最右侧,如果只滑动到中间,则弹回
滑动过程中要计算与初始位置的距离,然后计算并改变button的left属性值
2.按钮滑动的距离计算
因为滑动事件返回的数值都是以px作为单位,而我们在界面设计时使用的是rpx,在这里我们要进行数值计算,在onLoad中,我们获取到当前设备的宽度,rpx作为单位时,认为当前设备的逻辑宽度为750rpx,假设屏幕实际宽度为400px,那么1px
= 400/750 rpx,那么滑动的距离 = 实际互动距离 / (400/750) rpx
经过换算后,我们就可以得到以rpx作为单位的滑动距离。
以上就是微信小程序按钮滑动功能代码详细解析及示例的详细内容!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~