Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to achieve button sliding function by WeChat Mini Programs", so the editor summarizes the following contents for you. The content is detailed, the steps are clear, and it has a certain reference value. I hope you can gain something after reading this article. Let's take a look at this article "how to achieve button sliding function by WeChat Mini Programs".

The realization method of WeChat Mini Programs Button sliding

one。 Look at things first.

Before sliding

After sliding

two。 Add the code again

Index.wxml

Send

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 (37114219,0.3);}

Index.js

Page ({data: {moveStartX: 0, / / start position moveSendBtnLeft: 0, / / send button left attribute moveEndX: 0, / / end position screenWidth: 0, / / screen width moveable: true,// slideable disabled: true,// verification code input box is available, SendBtnColor: "# 7f7f7f" / / slide button color} OnLoad: function () {var that = this / / get the screen width wx.getSystemInfo ({success: function (res) {that.setData ({screenWidth: res.screenWidth})},})}, / / start moving moveSendBtnStart: function (e) {if (! this.data.moveable) {return;} console.log ("start"); console.log (e) This.setData ({moveStartX: e.changedTouches ["0"] .clientX})}, / / Mobile send button 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 = 0 Else {that.setData ({moveEndX: e.changedTouches [0] .clientX, moveable: false, disabled: false, SendBtnColor: "# 289adc"})}})

three。 By the way,

1. Button sliding event

The bindtouchstart / / button starts to slide

Bindtouchend / / Button ends sliding

The bindtouchmove / / button is sliding

Sliding at the beginning of the button is where the record begins.

At the end of the slide, it is necessary to determine whether the button has slid to the far right, and if it only slides to the middle, it will bounce back

Calculate the distance from the initial position during sliding, and then calculate and change the value of the left attribute of button

two。 Calculation of the distance of button sliding

Because the values returned by sliding events are all in px, and we use rpx in interface design, here we want to do numerical calculation. In onLoad, we get the width of the current device. When rpx is used as a unit, we think that the logical width of the current device is 750rpx, assuming that the actual width of the screen is 400px, then 1px = 400 rpx 750 rpx, then the sliding distance = actual interaction distance / (400 rpx 750)

After conversion, we can get the sliding distance in rpx.

The above is about the content of this article on "how to realize the button sliding function of WeChat Mini Programs". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.