這篇“微信小程序怎么實現(xiàn)按鈕滑動功能”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“微信小程序怎么實現(xiàn)按鈕滑動功能”文章吧。
從策劃到設(shè)計制作,每一步都追求做到細(xì)膩,制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶提供成都網(wǎng)站設(shè)計、網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設(shè)計、域名注冊、網(wǎng)頁空間、網(wǎng)絡(luò)營銷、VI設(shè)計、 網(wǎng)站改版、漏洞修補等服務(wù)。為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(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作為單位的滑動距離。
以上就是關(guān)于“微信小程序怎么實現(xiàn)按鈕滑動功能”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。