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


Posted in Javascript onSeptember 27, 2017

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

一.先看东西

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

滑动前

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

滑动后

二.再上代码

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

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

Javascript 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
javascript 获取表单file全路径
Dec 31 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 #Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 #jQuery
javascript 作用于作用域链的详解
Sep 27 #Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 #Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 #Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 #Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 #Javascript
You might like
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python使用epoll实现服务端的方法
2018/10/16 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
python logging日志模块原理及操作解析
2019/10/12 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
英文简历中的自荐信范文
2013/12/14 职场文书
简历的自荐信
2013/12/19 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle