欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-07-06 21:06:20
微信小程序 按钮滑动的实现方法 一.先看东西 滑动前 滑动后 二.再上代码 index.wxml

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

一.先看东西

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

滑动前

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

滑动后

二.再上代码

index.wxml

<view class="content">
  <view class="slidercontent">
    <input placeholder="验证码" placeholder-class="input-placeholder" disabled="{{disabled}}" />
    <view class="slider" bindtouchstart="movesendbtnstart" bindtouchend="movesendbtnend" bindtouchmove="movesendbtn" style="left:{{movesendbtnleft}}rpx;background-color:{{sendbtncolor}}">发送</view>
  </view>
</view>

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作为单位的滑动距离

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

上一篇： VueJS事件处理器v-on的使用方法

下一篇： vue中SPA单页面应用程序详解

推荐阅读