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


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函数般调用正则
Apr 08 Javascript
jquery 可排列的表实现代码
Nov 13 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 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
菜鸟学PHP之Smarty入门
2007/01/04 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
最短的IE判断代码
2011/03/13 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
劳动竞赛活动总结
2014/05/05 职场文书
诚信贷款承诺书
2014/05/30 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
党员违纪检讨书
2015/05/05 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
详解Go与PHP的语法对比
2021/05/29 PHP
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫