这篇文章主要介绍了微信小程序 按钮的实现方法的相关资料,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下

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

一.先看东西



二.再上代码

index.wxml

<view>
  <view>
    <input placeholder-class="input-placeholder" disabled="{{disabled}}" />
    <view bindtouchstart="moveSendBtnStart" bindtouchend="moveSendBtnEnd" bindtouchmove="moveSendBtn">发送</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作为单位的距离

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

最新资讯
董明珠高票当选格力电器新一任非独立董事

董明珠高票当选格力电

根据现场和网络投票结果,董明珠高票当选格力电器新一任
刘姝威当选格力电器新一任董事会独立董事

刘姝威当选格力电器新

根据现场和网络投票结果,刘姝威当选格力电器新一任董事
格力电器:本次临时股东大会所有议案均获通过

格力电器:本次临时股东

格力电器高层宣布,根据现场和网络投票结果,本次临时股东
直击|滴滴:乘客醉酒乘车规则拓至全国15城

直击|滴滴:乘客醉酒乘

经一个多月的试行,滴滴“乘客醉酒乘车”规则今日从深圳
董明珠回应格力接班人计划:企业没规定什么年龄退休

董明珠回应格力接班人

董明珠表示,企业没有规定什么年龄退休, 只要你想干你能
靠《纸牌屋》火的Netflix又涨价,国内流媒体敢吗?

靠《纸牌屋》火的Netf

Netflix始终保持高质量、高效率、斥巨资的精良出品,令
最新文章
微信小程序CSS3动画下拉菜单效果

微信小程序CSS3动画下

这篇文章主要为大家详细介绍了微信小程序CSS3动画下拉
微信小程序使用swiper组件实现层叠轮播图

微信小程序使用swiper

这篇文章主要为大家详细介绍了微信小程序使用swiper组
微信小程序实现带缩略图轮播效果

微信小程序实现带缩略

这篇文章主要为大家详细介绍了微信小程序实现带缩略图
小程序实现五星点评效果

小程序实现五星点评效

这篇文章主要为大家详细介绍了小程序实现五星点评效果
微信小程序实现笑脸评分功能

微信小程序实现笑脸评

这篇文章主要为大家详细介绍了微信小程序实现笑脸评分
微信小程序自定义轮播图

微信小程序自定义轮播

这篇文章主要为大家详细介绍了微信小程序自定义轮播图