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

This article mainly introduces "how to change the point in WeChat Mini Programs swiper-dot into a slider". In daily operation, I believe many people have doubts about how to change the point in WeChat Mini Programs swiper-dot into a slider. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the question of "how to change the point in WeChat Mini Programs swiper-dot into a slider". Next, please follow the editor to study!

Target effect

On the whole, it's simple. The main reason is that the slider below takes some work. The functional points that need to be implemented after sorting out the requirements are as follows:

The slider needs to have a natural sliding effect.

The slider needs to slide in the sliding direction.

Train of thought

After collation, the implementation scheme is as follows:

When we swipe the content of swiper, we can get the curPage of the current page (usually the component will provide the current page), and then we can set the prePage of the previous page after the slide ends. This prePage is actually the curPage this time. Through this page, we can get the start position and end position of the slider slide.

Sliding can be achieved through transform.

Because of using transform, we need Mini Program to support custom style, but for now Mini Program provides a set of this.animate methods.

Realize

Swiper snooping change

First, we need to use the change event of swiper, with the following code:

This is the swiper {{index}} custom dot module

Second, we need to customize the DOM of dot, that is, our slider area, with the following code:

This needs to give our slider an initial size, otherwise there will be a width-transformed jitter after sliding, that is, dotBarWidth.

The size of the slider is calculated based on the length of the slide and the number of swiper-item. After we get the width in this way, we just have to offset the multiple of the slider width.

Let dotWidth = 100 dotBarWidth = Math.round (dotWidth/popular_zone_list.length); logic in the change event

Now that the template has been written, let's start writing the events of change, as follows:

SliderHandler ({detail}) {let curPage = detail.current; let self = this; this.animate (".dot-bar", [{translateX: self.prePage * 100 + "%", transformOrigin: "center",}, {translateX: curPage*100 + "%", transformOrigin: "center",},], 100, callback self.prePage = curPage for function () {/ / animate Self.clearAnimation (".container", {translateX: true, transformOrigin: true});});}, / / if it is not Mini Program, then this.animate can be replaced with dynamic binding style or other DOM operations. At this point, the study on "how to change the points in WeChat Mini Programs swiper-dot into a slider" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.