微信小程序按鈕滑動的實現(xiàn)方法

微信小程序按鈕滑動的實現(xiàn)方法

目前創(chuàng)新互聯(lián)公司已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、博樂網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

一.先看東西

滑動前

微信小程序按鈕滑動的實現(xiàn)方法

滑動后

二.再上代碼

index.wxml


  
    
    發(fā)送

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, //發(fā)送按鈕的left屬性
    moveEndX: 0, //結(jié)束位置
    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
    })
  },
  //移動發(fā)送按鈕
  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
      })
    }
  },
  // 結(jié)束移動
  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 //按鈕結(jié)束滑動
bindtouchmove //按鈕正在滑動

在按鈕開始滑動是記錄開始的位置

滑動結(jié)束時要判斷按鈕是否已經(jīng)滑動到最右側(cè)，如果只滑動到中間，則彈回

滑動過程中要計算與初始位置的距離，然后計算并改變button的left屬性值

2.按鈕滑動的距離計算

因為滑動事件返回的數(shù)值都是以px作為單位，而我們在界面設(shè)計時使用的是rpx，在這里我們要進行數(shù)值計算，在onLoad中，我們獲取到當(dāng)前設(shè)備的寬度，rpx作為單位時，認(rèn)為當(dāng)前設(shè)備的邏輯寬度為750rpx，假設(shè)屏幕實際寬度為400px，那么1px = 400/750 rpx，那么滑動的距離 = 實際互動距離 / （400/750） rpx

經(jīng)過換算后，我們就可以得到以rpx作為單位的滑動距離

如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

當(dāng)前標(biāo)題：微信小程序按鈕滑動的實現(xiàn)方法
分享網(wǎng)址：http://weahome.cn/article/pdogcc.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

微信小程序按鈕滑動的實現(xiàn)方法

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管