微信⼩程序按钮滑动的实现⽅法
微信⼩程序 按钮滑动的实现⽅法⼀.先看东西
滑动前
滑动后⼆.再上代码index.wxml
发送
index.wxss
.content {
margin-top: 100rpx; font-size: 24rpx;}
.sliderContent{ position: relative; margin: 0 auto;
margin-bottom: 50rpx; padding-left: 60rpx; width: 425rpx;
box-sizing: border-box; height: 70rpx; line-height: 70rpx; border-radius: 60rpx; background-color: #fff; color: #2adc;
box-shadow: 0px 4px 6px 0px rgba(37, 114, 219, 0.3);}
.sliderContent input { line-height: 70rpx; height: 70rpx;
box-sizing: border-box; padding-left: 40rpx; width: 250rpx;}
.input-placeholder { text-align: center; color: #2adc;}
.slider {
position: absolute; top: 0; left: 0;
width: 150rpx;
border-radius: 60rpx; text-align: center;
background-color: #7f7f7f; color: #fff;
box-shadow: 0px 4px 6px 0px rgba(37, 114, 219, 0.3);}
index.js
Page({ data: {
moveStartX: 0, //起始位置
moveSendBtnLeft: 0, //发送按钮的left属性 moveEndX: 0, //结束位置 screenWidth: 0, //屏幕宽度 moveable: true, //是否可滑动
disabled: true,//验证码输⼊框是否可⽤, SendBtnColor: \"#7f7f7f\" //滑动按钮颜⾊ },
onLoad: function () { var that = this; // 获取屏幕宽度 wx.getSystemInfo({
success: function (res) { that.setData({
screenWidth: res.screenWidth }) }, }) },
// 开始移动
moveSendBtnStart: function (e) { if (!this.data.moveable) { return; }
console.log(\"start\"); console.log(e);
this.setData({
moveStartX: e.changedTouches[\"0\"].clientX }) },
//移动发送按钮
moveSendBtn: function (e) { if (!this.data.moveable) { return; }
var that = this;
// console.log(e.touches[0]);
var left = ((e.touches[0].clientX - that.data.moveStartX) / (that.data.screenWidth / 750)) console.log(left) if (left <= 275.5) { this.setData({
moveSendBtnLeft: left }) } else {
this.setData({
moveSendBtnLeft: 275.5 }) } },
// 结束移动
moveSendBtnEnd: function (e) { console.log(\"end\"); var that = this;
var left = ((e.changedTouches[0].clientX - that.data.moveStartX) / (that.data.screenWidth / 750)) console.log(left); if (left < 275.5) {
for (let i = left; i >= 0; i--) {
that.setData({
moveSendBtnLeft: i }) }
} else {
that.setData({
moveEndX: e.changedTouches[0].clientX, moveable: false, disabled: false,
SendBtnColor: \"#2adc\" }) } }
})
三.顺便说说1.按钮滑动事件
bindtouchstart //按钮开始滑动bindtouchend //按钮结束滑动bindtouchmove //按钮正在滑动在按钮开始滑动是记录开始的位置
滑动结束时要判断按钮是否已经滑动到最右侧，如果只滑动到中间，则弹回滑动过程中要计算与初始位置的距离，然后计算并改变button的left属性值2.按钮滑动的距离计算
因为滑动事件返回的数值都是以px作为单位，⽽我们在界⾯设计时使⽤的是rpx，在这⾥我们要进⾏数值计算，在onLoad中，我们获取到当前设备的宽度，rpx作为单位时，认为当前设备的逻辑宽度为750rpx，假设屏幕实际宽度为400px，那么1px = 400/750 rpx，那么滑动的距离 = 实际互动距离 / （400/750） rpx经过换算后，我们就可以得到以rpx作为单位的滑动距离
如有疑问请留⾔或者到本站社区交流讨论，感谢阅读，希望能帮助到⼤家，谢谢⼤家对本站的⽀持！
