微信小程序 按钮滑动的实现方法
时间:2019-04-07
本文章向大家介绍微信小程序 按钮滑动的实现方法,主要包括微信小程序 按钮滑动的实现方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
微信小程序 按钮滑动的实现方法
一.先看东西
滑动前
滑动后
二.再上代码
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作为单位的滑动距离
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
- ExtJs学习笔记(11)_Absolute布局和Accordion布局
- ExtJs学习笔记(9)_Window的基本用法
- DateTime在ExtJs中无法正确序列化的问题
- ELK实时日志分析平台环境部署--完整记录
- 梳理Linux下OSI七层网络与TCP/IP五层网络架构
- 字符编码-使用c#研究
- iframe高度自适应的IE解决方案
- javascript读写本机文本文件
- 崔立鹏:腾讯云为知识竞技游戏提供解决方案
- Mysql之binlog日志说明及利用binlog日志恢复数据操作记录
- 常用的AJAX弹出层代码
- Linux下检测IP地址冲突及解决方法
- linux如何挂载windows下的共享文件
- silverlight2中的定时器,以及如何动态改变控件的坐标
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 5千字的SpringMVC总结,我觉得你会需要
- 【原创】Java并发编程系列36 | FutureTask
- React Hooks-useTypescript!
- spring-boot项目优雅的http客户端工具,真香!
- 人人都可以学会生存分析(学徒数据挖掘)
- 谈谈const跟Object.freeze()
- Java String类源码阅读笔记
- 别再用JSON配置文件了
- 什么,你一定要基于FPKM标准化表达矩阵做单细胞差异分析
- Tomcat 9最新版安装与使用手册,tomcat更改端口号,tomcat控制台乱码问题解决方法
- Python 技术篇-读取遍历指定路径的文件,区分文件和文件夹
- MySQL蜜罐获取攻击者微信ID
- PyQt5 技巧篇-增加一个类级变量,类级变量的设置方法,类级"常量"设置方法
- PyQt5 技巧篇-按钮隐藏并保留位置,设置按钮的可见度,设置按钮透明度
- PyQt5 技巧篇-复选框绑定行内容,全选、清空、展示选中的内容功能实现演示,设置复选框选中,检查复选框选中状态