用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序页面效果--按钮滑动

Rolan 2017-9-2 00:17

一.先看东西滑动前滑动后二.再上代码index.wxmlview class="content" view class="sliderContent" input placeholder="验证码" placeholder-class="input-placeholder" disabled="{{disabled}}" / view class="slide ...

一.先看东西

滑动前 

滑动后

二.再上代码

index.wxml

  1. <view class="content">
  2. <view class="sliderContent">
  3. <input placeholder="验证码" placeholder-class="input-placeholder" disabled="{{disabled}}" />
  4. <view class="slider" bindtouchstart="moveSendBtnStart" bindtouchend="moveSendBtnEnd" bindtouchmove="moveSendBtn" style="left:{{moveSendBtnLeft}}rpx;background-color:{{SendBtnColor}}">发送</view>
  5. </view>
  6. </view>

index.wxss

  1. .content {
  2. margin-top: 100rpx;
  3. font-size: 24rpx;
  4. }
  5. .sliderContent{
  6. position: relative;
  7. margin: 0 auto;
  8. margin-bottom: 50rpx;
  9. padding-left: 60rpx;
  10. width: 425rpx;
  11. box-sizing: border-box;
  12. height: 70rpx;
  13. line-height: 70rpx;
  14. border-radius: 60rpx;
  15. background-color: #fff;
  16. color: #289adc;
  17. box-shadow: 0px 4px 6px 0px rgba(37, 114, 219, 0.3);
  18. }
  19. .sliderContent input {
  20. line-height: 70rpx;
  21. height: 70rpx;
  22. box-sizing: border-box;
  23. padding-left: 40rpx;
  24. width: 250rpx;
  25. }
  26. .input-placeholder {
  27. text-align: center;
  28. color: #289adc;
  29. }
  30. .slider {
  31. position: absolute;
  32. top: 0;
  33. left: 0;
  34. width: 150rpx;
  35. border-radius: 60rpx;
  36. text-align: center;
  37. background-color: #7f7f7f;
  38. color: #fff;
  39. box-shadow: 0px 4px 6px 0px rgba(37, 114, 219, 0.3);
  40. }

index.js

  1. Page({
  2. data: {
  3. moveStartX: 0, //起始位置
  4. moveSendBtnLeft: 0, //发送按钮的left属性
  5. moveEndX: 0, //结束位置
  6. screenWidth: 0, //屏幕宽度
  7. moveable: true, //是否可滑动
  8. disabled: true,//验证码输入框是否可用,
  9. SendBtnColor: "#7f7f7f" //滑动按钮颜色
  10. },
  11. onLoad: function () {
  12. var that = this;
  13. // 获取屏幕宽度
  14. wx.getSystemInfo({
  15. success: function (res) {
  16. that.setData({
  17. screenWidth: res.screenWidth
  18. })
  19. },
  20. })
  21. },
  22. // 开始移动
  23. moveSendBtnStart: function (e) {
  24. if (!this.data.moveable) {
  25. return;
  26. }
  27. console.log("start");
  28. console.log(e);
  29. this.setData({
  30. moveStartX: e.changedTouches["0"].clientX
  31. })
  32. },
  33. //移动发送按钮
  34. moveSendBtn: function (e) {
  35. if (!this.data.moveable) {
  36. return;
  37. }
  38. var that = this;
  39. // console.log(e.touches[0]);
  40. var left = ((e.touches[0].clientX - that.data.moveStartX) / (that.data.screenWidth / 750))
  41. console.log(left)
  42. if (left <= 275.5) {
  43. this.setData({
  44. moveSendBtnLeft: left
  45. })
  46. } else {
  47. this.setData({
  48. moveSendBtnLeft: 275.5
  49. })
  50. }
  51. },
  52. // 结束移动
  53. moveSendBtnEnd: function (e) {
  54. console.log("end");
  55. var that = this;
  56. var left = ((e.changedTouches[0].clientX - that.data.moveStartX) / (that.data.screenWidth / 750))
  57. console.log(left);
  58. if (left < 275.5) {
  59. for (let i = left; i >= 0; i--) {
  60. that.setData({
  61. moveSendBtnLeft: i
  62. })
  63. }
  64. } else {
  65. that.setData({
  66. moveEndX: e.changedTouches[0].clientX,
  67. moveable: false,
  68. disabled: false,
  69. SendBtnColor: "#289adc"
  70. })
  71. }
  72. }
  73. })

三.顺便说说

1.按钮滑动事件

  1. bindtouchstart //按钮开始滑动
  2. bindtouchend //按钮结束滑动
  3. bindtouchmove //按钮正在滑动

在按钮开始滑动是记录开始的位置 
滑动结束时要判断按钮是否已经滑动到最右侧,如果只滑动到中间,则弹回

滑动过程中要计算与初始位置的距离,然后计算并改变button的left属性值

2.按钮滑动的距离计算

因为滑动事件返回的数值都是以px作为单位,而我们在界面设计时使用的是rpx,在这里我们要进行数值计算 
在onLoad中,我们获取到当前设备的宽度 
rpx作为单位时,认为当前设备的逻辑宽度为750rpx 
假设屏幕实际宽度为400px,那么1px = 400/750 rpx 
那么滑动的距离 = 实际互动距离 / (400/750) rpx 
经过换算后,我们就可以得到以rpx作为单位的滑动距离

作者:我是渐渐呀 
链接:https://www.jianshu.com/p/527647def6f7 

鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: 我是渐渐呀 来自: 简书

相关阅读

推荐阅读

    最新Demo