Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to realize the sliding deletion function of Mini Program". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Mini Program sliding delete function how to achieve" it!

Example of Mini Program sliding deletion effect

Each list item binds touchstart and touchmove events, listens to the sliding gesture, determines the sliding angle, and determines whether the sliding is valid. Each item contains the flag value isTouchMove, which is used to determine whether the list item slides successfully. There are two classes that directly manipulate the data source when rendering the deletion according to the value of isTouchMove.

Touchmove: function (e) {

Let index = e.currentTarget.dataset. Index _ current index

StartX = this.data.startX,// start X coordinate

StartY = this.data.startY,// start Y coordinate

TouchMoveX = e.changedTouches [0] .clientX, / / sliding change coordinates

TouchMoveY = e.changedTouches [0] .clientY, / / sliding change coordinates

/ / get the sliding angle

Angle = this.angle ({X: startX, Y: startY}, {X: touchMoveX, Y: touchMoveY})

This.data.list.forEach (function (v, I) {

V.isTouchMove = false

/ / slide more than 30 degrees return

If (Math.abs (angle) > 30) return

If (I = = index) {

If (touchMoveX > startX) / / right slide

V.isTouchMove = false

Else / / left Slide

V.isTouchMove = true

}

})

/ update data

This.setData ({

List: this.data.list

})

}

At this point, I believe that everyone on the "Mini Program sliding delete function how to achieve" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.