微信小程序按钮滑动的实现方法

微信小程序 2019-01-03

微信小程序按钮滑动的实现方法

一.先看东西

滑动前

滑动后

二.再上代码

index.wxml

index.wxss

.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: #289adc;
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: #289adc;
}

.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,0.3);
}

index.js

属性 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: "#289adc"
  })
}

}

})

三.顺便说说

1.按钮滑动事件

bindtouchstart //按钮开始滑动 bindtouchend //按钮结束滑动 bindtouchmove //按钮正在滑动

在按钮开始滑动是记录开始的位置

滑动结束时要判断按钮是否已经滑动到最右侧，如果只滑动到中间，则弹回

滑动过程中要计算与初始位置的距离，然后计算并改变button的left属性值

2.按钮滑动的距离计算

因为滑动事件返回的数值都是以px作为单位，而我们在界面设计时使用的是rpx，在这里我们要进行数值计算，在onLoad中，我们获取到当前设备的宽度，rpx作为单位时，认为当前设备的逻辑宽度为750rpx，假设屏幕实际宽度为400px，那么1px = 400/750 rpx，那么滑动的距离 = 实际互动距离 / （400/750） rpx

经过换算后，我们就可以得到以rpx作为单位的滑动距离

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

小程序微信小程序按钮滑动按钮滑动的实现方法

[小程序]微信小程序获取input并发送网络请求

1. 获取输入框数据wxml中的input上增加bindinput属性，和方法值在js部分定义与之对应的方法，只要在输入...

[小程序]微信小程序获取位置展示地图并标注信息

1.map组件的高度如果想要铺满屏幕，要是使用height:100vh样式2.获取位置要在app.json中标明权限3.先使用...

QQ小程序支付

QQ小程序支付 Java后端同学折腾QQ小程序的支付折腾了好几天，没有完成统一下单，因为我做过微信和支付...

.NET之微信小程序获取用户UnionID

前言：在实际项目开发中我们经常会遇到账号统一的问题，如何在不同端或者是不同的登录方式下保证同一个...

微信小程序picker组件关于objectArray数据类型绑定