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

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

一.先看东西



二.再上代码

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

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

最新资讯
触宝递交招股书:启明红杉为前两大股东 最高募资1亿美元

触宝递交招股书:启明红

移动互联网公司触宝日前递交招股书,股票代码为CTK,触宝
为何华为三星都想抢可折叠手机的首发权?

为何华为三星都想抢可

对于厂商们来说,可折叠手机一旦卡准了需求,往往就帮助行
争夺在线教育“教父”:野心、冒险与混战

争夺在线教育“教父”

未来的“教父”是谁?俞敏洪、张邦鑫、伏彩瑞还是米雯娟
蔚来上市到底开了个好头还是坏头

蔚来上市到底开了个好

不踏踏实实用心造车专注于技术突破和量产能力的提升,而
你是“果粉”?5款抱枕让你把苹果产品可以抱在怀里

你是“果粉”?5款抱枕

估计是出于对版权的考虑,Throwboy并未在众筹页面上没有
四名劫匪Apple Store内抢走20部iPhone:遭顾客抓拍

四名劫匪Apple Store

虽然这些贼只在商店里呆了很短的时间,但依然拿走了20部
最新文章
Angular2进阶之如何避免Dom误区

Angular2进阶之如何避

这篇文章主要介绍了Angular2进阶之如何避免Dom误区,小
使用FileReader API创建Vue文件阅读器组件

使用FileReader API创

这篇文章主要介绍了使用FileReader API创建一个Vue的
react 实现页面代码分割、按需加载的方法

react 实现页面代码分

本篇文章主要介绍了react 实现页面代码分割、按需加载
Vue项目分环境打包的实现步骤

Vue项目分环境打包的

这篇文章主要介绍了Vue项目如何分环境打包,实现方法大
vue 组件中slot插口的具体用法

vue 组件中slot插口的

这篇文章主要介绍了vue 中slot 的具体用法,包括子组件
JS遍历DOM文档树的方法实例详解

JS遍历DOM文档树的方

这篇文章主要介绍了JS遍历DOM文档树的方法,结合实例形