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

This article mainly introduces the relevant knowledge of "how to achieve left-slip deletion effect in WeChat Mini Programs". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve left-slip deletion effect in WeChat Mini Programs" can help you solve the problem.

Let's see the effect first.

The effect to be achieved:

1. When you slide to the left, item follows the finger to the left, while two clickable buttons appear on the right.

2, when the sliding distance is more than half of the width of the button to release the finger, item automatically slides to the left to show the button, when less than half of the item automatically returns to the original position and hides the button.

Train of thought:

1, first of all, each item on the page is divided into two layers, the upper layer places the normal content, and the lower layer places the button displayed by the left slide, which can be layered using z-index.

The upper layer of the item uses absolute positioning, and we manipulate the value of the left property to achieve a left shift.

3, we use the touch object provided by WeChat Mini Programs api and three functions related to finger touch (touchstart,touchmove,touchend) to realize the item to move with the finger.

Because it is relatively simple, so go directly to the code. The detailed explanation is in the comments of the code. First of all, take a look at the layout of the page.

Set as the default address to delete

Look at the js code again.

Page ({data: {addressList: {"Contact": "Zhong Cheng", "Mobile": 13888888888, "Address": "Creative Industry Park of Suzhou Industrial Park"}, {"Contact": "concave and convex man", "Mobile": 1366666666666, "Address": "Dushu Gymnasium, Suzhou Industrial Park, Jiangsu Province"}, {"Contact": "Tu ao Man", "Mobile": 13666666666, "Address": "Dushu Gymnasium, Suzhou Industrial Park, Jiangsu Province"}] EditIndex:0, delBtnWidth:150// delete button width unit (rpx)}, onLoad:function (options) {}, / / finger just put on the screen to trigger touchS:function (e) {console.log ("touchS" + e) / / determine whether there is only one touch point if (e.touches.length==1) {this.setData ({/ / record the X coordinate startX:e.touches [0] .clientX} of the starting position of the touch);}}, / / trigger when touching, and trigger touchM:function (e) {console.log ("touchM:" + e) every time the finger moves on the screen. Var that = this if (e.touches.length==1) {/ / record the X coordinate of the touch point var moveX = e.touches [0] .clientX; / / calculate the difference between the X coordinate of the starting point of the finger and the X coordinate of the current touch point var disX = that.data.startX-moveX; / / delBtnWidth is the width of the right button area var delBtnWidth = that.data.delBtnWidth; var txtStyle = "; if (disX = = 0 | | disX

0) {/ / the text layer left value equals the finger movement distance txtStyle = "left:-" + disX+ "px"; if (disX > = delBtnWidth) {/ / controls the maximum finger movement distance is the width of the delete button txtStyle = "left:-" + delBtnWidth+ "px";}} / / gets which item var index = e.currentTarget.dataset. Index; var list = that.data.addressList / / set the spliced style to the current item [index] .txtStyle = txtStyle; / / update the status of the list this.setData ({addressList:list});}}, touchE:function (e) {console.log ("touchE" + e); var that = this if (e.changedTouches.length==1) {/ / the X coordinate of the touch point var endX = e.changedTouches [0] .clientX after the end of finger movement / / at the beginning and end of the touch, the distance var disX = that.data.startX-endX; var delBtnWidth = that.data.delBtnWidth; / / if the distance is less than the 1 disX 2 of the delete button, the delete button var txtStyle = disX > delBtnWidth/2 is not displayed? "left:-" + delBtnWidth+ "px": "left:0px"; / / get which item var index = e.currentTarget.dataset.index; var list = that.data.addressList; list [index] .txtStyle = txtStyle; / / update the status of the list that.setData ({addressList:list});}} this is the end of the content on "how to achieve left-slipping deletion effect in WeChat Mini Programs". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.