My WeChat public account: Front-end Cultivation Road, welcome to follow me.

Problems that need to be solved

In recent days, I have been looking at how to create a swiper carousel for WeChat mini programs. Because I need to generate both the code for the mini program and the H5 version of the code, it would be inefficient to write two sets, so I chose uni-app.

uni-appAlready directly supports carousel animation in the basic component swiper.

What I mainly need to solve are the following problems:

• ①How to add the popular css3animate.css in swiper Animation.
• ②If you slide the carousel image after adding it, how can you ensure that the animation on the next screen does not play automatically.
• ③How to achieve infinite loop playback of carousel images.
• ④How can it be achieved? When the user clicks a button, he can jump to the specifiedswiper-itemmiddle. That is, jump to the specified screen.
• ⑤The code of the applet and H5 version will generate a header, and the navigation bar needs to be hidden in the H5 version.

The following is my entire production process, for reference only. In addition, the code is developed byuni-app, so there is no problem in testing in mini programs and H5. In addition, in order to facilitate the understanding of小programdevelopers, the小programversion code and theuni-appcode will be provided for reference.

Code implementation

animate.css is often used in H5 development. It is naturally supported in WeChat, because WeChat has size restrictions on uploaded mini programs, so here I used a very simplifiedanimate.css, which deleted a lot of-webkit- css3 starting with animation. Because we only need to run in small programs and H5, this will not have much impact. You can get it from the code below if needed.

Let’s take a look at the code first:

• First of alluni-appsupports sass. The concise versionanimate.cssis directly introduced into css.Problem ①
• After checking the document, I found thatcircularThis parameter can achieve something similar The H5 page uses the function of swiper.jsloopparameters. Here I fell intouni-appand WeChat appletdocument description In the pit. Because I have been looking for the parameterloop(loop), I even thought that this infinite loop function could not be realized. It turns out that this parameter in the appletis calledcircular(circular). o(╯□╰)oQuestion③
• Because I want to achieve a vertical screen sliding effect here, so the parametersverticalis set totrue.
• Inuni-app, viachangeevent, you can monitor every change of the carousel screen. In this event, I recorded the subscript of the current screencurrent. Then cancel all css3 animations onnon-current screens. Finally, in theanimationfinishevent, when theswipersliding animation ends, give Add css3 animation to the elements of the current screen.Question②
• There is a## inuni-appThe#current-item-idparameter represents theitem-idof the current slider. It took me a long time to read this document before I understood it. It turns out thatswiper-itemneeds to be specified initem-id. Then when the user clicks the event, just modify the value bound to current-item-id. When my code is initialized,item-idis specified asslide2on the screen.Question ④
• The last question is to hide the H5 navigation inuni-appcolumn. Just setpages.json#titleNViewto falseis enough. WeChat Mini Program Code

  跳转到             //index.js const app = getApp() Page({ data: { currentId: 0, animate_0: 'swing', animate_1: '', animate_2: '' }, onLoad: function() { }, goChange: function() { this.setData({ currentId: 2 }); }, changeSwiper: function(event) { let current = event.detail.current; switch (current) { case 0: this.setData({ animate_1: '', animate_2: '' }); break; case 1: this.setData({ animate_0: '', animate_2: '' }); break; case 2: this.setData({ animate_0: '', animate_1: '' }); break; } }, changeFinish: function(event) { let current = event.detail.current; switch (current) { case 0: this.setData({ animate_0: 'swing', }); break; case 1: this.setData({ animate_1: 'shake', }); break; case 2: this.setData({ animate_2: 'tada', }); break; } } })

I hosted the code on the Tencent Cloud Developer Platform, you can refer to it if necessary. In the code directoryunpackage/dist/build/h5, there is the generated H5 version page. It should be noted that if it is deployed to a web server, it does not support opening the local file protocol.

Two versions of the code are generated for your reference.

Recommended tutorial: "WeChat Mini Program
"

The above is the detailed content of Mini program swiper carousel CSS3 animation and use to jump to specified swiper-item. For more information, please follow other related articles on the PHP Chinese website!