一.先看東西

滑動(dòng)前

滑動(dòng)后

二.再上代碼

index.wxml

<view class="content">
    <view class="sliderContent">
        <input placeholder="驗(yàn)證碼" placeholder-class="input-placeholder" disabled="{{disabled}}" />
        <view class="slider" bindtouchstart="moveSendBtnStart" bindtouchend="moveSendBtnEnd" bindtouchmove="moveSendBtn" style="left:{{moveSendBtnLeft}}rpx;background-color:{{SendBtnColor}}">發(fā)送</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, //發(fā)送按鈕的left屬性
        moveEndX: 0, //結(jié)束位置
        screenWidth: 0, //屏幕寬度
        moveable: true, //是否可滑動(dòng)
        disabled: true,//驗(yàn)證碼輸入框是否可用,
        SendBtnColor: "#7f7f7f" //滑動(dòng)按鈕顏色
    },

    onLoad: function () {
        var that = this;
        // 獲取屏幕寬度
        wx.getSystemInfo({
            success: function (res) {
                that.setData({
                    screenWidth: res.screenWidth
                })
            },
        })
    },
    //   開(kāi)始移動(dòng)
    moveSendBtnStart: function (e) {
        if (!this.data.moveable) {
            return;
        }
        console.log("start");
        console.log(e);
        this.setData({
            moveStartX: e.changedTouches["0"].clientX
        })
    },
    //移動(dòng)發(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é)束移動(dòng)
    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"
            })
        }
    }


})

三.順便說(shuō)說(shuō)

1.按鈕滑動(dòng)事件

bindtouchstart //按鈕開(kāi)始滑動(dòng)
bindtouchend //按鈕結(jié)束滑動(dòng)
bindtouchmove //按鈕正在滑動(dòng)

在按鈕開(kāi)始滑動(dòng)是記錄開(kāi)始的位置
滑動(dòng)結(jié)束時(shí)要判斷按鈕是否已經(jīng)滑動(dòng)到最右側(cè)，如果只滑動(dòng)到中間，則彈回

滑動(dòng)過(guò)程中要計(jì)算與初始位置的距離，然后計(jì)算并改變button的left屬性值

2.按鈕滑動(dòng)的距離計(jì)算

因?yàn)榛瑒?dòng)事件返回的數(shù)值都是以px作為單位，而我們?cè)诮缑嬖O(shè)計(jì)時(shí)使用的是rpx，在這里我們要進(jìn)行數(shù)值計(jì)算
在onLoad中，我們獲取到當(dāng)前設(shè)備的寬度
rpx作為單位時(shí)，認(rèn)為當(dāng)前設(shè)備的邏輯寬度為750rpx
假設(shè)屏幕實(shí)際寬度為400px，那么1px = 400/750 rpx
那么滑動(dòng)的距離 = 實(shí)際互動(dòng)距離 / （400/750） rpx
經(jīng)過(guò)換算后，我們就可以得到以rpx作為單位的滑動(dòng)距離