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

Most people do not understand the knowledge points of this article "how to slide around and switch pages in WeChat Mini Programs", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article, let's take a look at this "WeChat Mini Programs how to achieve left and right sliding switch page function" article.

WeChat Mini Programs's left and right sliding touch screen event, there are three main events: touchstart,touchmove,touchend.

The most important attributes of these three events are pageX and pageY, which represent the XQuery Y coordinates.

Touchstart triggers an event at the beginning of the touch

Touchend triggers an event at the end of the touch

This event is constantly triggered by the process of touchmove touch

All three events have a property of timeStamp. Looking at the timeStamp property, you can see that the order is touchstart = > touchmove= > touchmove= > = > touchmove= > touchend.

Step 1: bind events in the wxml file (interface that needs to slide left and right)

/ / do something

Step 2: deal with left and right sliding logic in js file

Var touchDot = 0 var interval var time at the time of touch, when used for sliding and when the time is less than 1 s, perform left and right sliding var interval = ""; / / record / clean up time record var nth = 0 / set the maximum number of active menus var tmpFlag = true / / judge that the sliding event will no longer be executed when East China exceeds the maximum menu value / / Touch start event touchStart:function (e) {touchDot = e.touches [0] .pageX; / / get the origin of touch / / use js timer to record time interval = setInterval (function () {time++;}, 100);}, / / Touch mobile event touchMove:function (e) {var touchMove = e.touches [0] .pageX Console.log ("touchMove:" + touchMove+ "touchDot:" + touchDot+ "diff:" + (touchMove-touchDot)); / / swipe if to the left (touchMove-touchDot nthMax? True: false;} if (nth = = index) {/ / next status change arr.active = true; name = arr.value;} return arr;}) this.getNews (name); / / get news list this.setData ({menu: tmp}) / / Update menu}} / / swipe if to the right (touchMove-touchDot > = 40 & & time

0) {nth =-- nth < 0? 0: nth; var tmp = this.data.menu.map (function (arr, index) {tmpFlag = false; arr.active = false; / / previous state change if (nth = = index) {arr.active = true; name = arr.value;} return arr }) this.getNews (name); / / get the news list this.setData ({menu: tmp}); / / Update menu}} / / touchDot = touchMove; / / use the previous point as the origin every time you move (it seems useless)}, / / touch the end event touchEnd:function (e) {clearInterval (interval); / / clear setInterval time = 0; tmpFlag = true / / reply to the sliding event}, the above is the content of this article on "how to realize the function of sliding left and right to switch pages in WeChat Mini Programs". I believe we all have some 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.