微信小程序怎么实现按钮滑动功能

这篇"微信小程序怎么实现按钮滑动功能"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"微信小程序怎么实现按钮滑动功能"文章吧。

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

一.先看东西

滑动前

滑动后

二.再上代码

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

三.顺便说说

1.按钮滑动事件

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

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

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

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

2.按钮滑动的距离计算

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

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

以上就是关于"微信小程序怎么实现按钮滑动功能"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。