How does WeChat Mini Programs realize the button sliding function?
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.
