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

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

The article involves technical points WeChat Mini Programs native Swiper control Wxss Transform, Transition broadcast strip rolling callback control WeChat Mini Programs conditional rendering, list rendering all add up to 30 or 40 lines of code, most of which are also used to write wxml UI code, so the function is very simple to achieve.

First of all, to simplify the problem, we can use native components to achieve the effect we want, and never develop Component ourselves. Reason: I am lazy + I dare not say that the performance is comparable to that of native components.

Let's first analyze the effects we need to achieve in a wave of gif and which effects can be achieved by directly modifying the attributes of the native Swiper.

We need our own implementation of automatic scrolling + manual drag and drop (native components help us complete Property:autoplay)

Panel indicator points (native components help us complete Property:indicator-dots)

The edges of the non-Active state diagram can be exposed around (that is, the Quiet state, which will be defined later by class) (native components help us complete Property:previous-margin and next-margin)

The picture scrolls to the center position to enlarge, and scrolls out to zoom out (we handwritten implementation, using the scrolling callback mentioned in the technical point + conditional rendering. Where scroll back to call Property:bindchange)

In this way, it is very clear that all we need to achieve is to zoom in and out of the animation. Go one step further

It can be implemented in two ways:

Wxss implementation

Js implementation

It is clear that very little wxss implementation code can achieve the same effect, so~

/ / .wxml//.wxss.swiperClass {margin: 0ease-in marginal top: 10px;} .slide-image {width: 100% ease-in height: 90% borderlyradius: 10pxposition: relative;} image.active {transform: none;transition: all 0.2s ease-in 0s;} image.quiet {transform: scale (0.8333333); transition: all 0.2s ease-in 0s } / .jsdata: {imgUrls: ['xxx','xxx','xxx','xxx'], swiperIndex: 0 / / there will be a problem when the first startup display is not written here, bindchange (e) {this.setData ({swiperIndex: e.detail.current})}. The above Swiper control also has the property of setting width and height. Just fill in a few numbers to test without affecting the main functions.

This is the end of the content about "how to achieve the merry-go-round effect of WeChat Mini Programs". Thank you for your 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.