Mini program swiper carousel CSS3 animation and use to jump to specified swiper-item

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 css3 <span style="font-size: 14px;">animate.css in swiper </span>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 specified <span style="font-size: 14px;">swiper-item</span>middle. 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 by uni-app, so there is no problem in testing in mini programs and H5. In addition, in order to facilitate the understanding of 小program developers, the 小program version code and the uni-app code 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 simplified animate.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:

<template>
    <view class="content">
        <button type="primary" @tap="goChange">跳转到第二屏</button>
        <swiper class="content-swiper" :vertical="true" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" @change="changeSwiper" @animationfinish="changeFinish" :current-item-id="item_id" circular="true">
            <swiper-item item-id="slide0">
                <view class="swiper-item">
                    <image src="../../static/uni.png" :class="animate_0"></image>
                </view>
            </swiper-item>
            <swiper-item item-id="slide1">
                <view class="swiper-item">
                    <image src="../../static/uni.png" :class="animate_1"></image>
                </view>
            </swiper-item>
            <swiper-item item-id="slide2">
                <view class="swiper-item">
                    <image src="../../static/uni.png" :class="animate_2"></image>
                </view>
            </swiper-item>
            <swiper-item item-id="slide3">
                <view class="swiper-item">
                    <image src="../../static/uni.png" :class="animate_3"></image>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                item_id: 'slide2',
                animate_0: 'animated swing',
                animate_1: '',
                animate_2: '',
                animate_3: ''
            }
        },
        onLoad() {

        },
        methods: {
            changeSwiper(event){    // 清空除了当前swiper以外的所有动画
                let current = event.detail.current;    // 当前页下标
                this.item_id = 'slide'+current;     // 这里必须记录，否则只能跳转一次
                switch (current){
                    case 0:
                        this['animate_1'] = this['animate_2'] = this['animate_3'] = '';
                    break;
                    case 1: 
                        this['animate_0'] = this['animate_2'] = this['animate_3'] = ''; 
                    break;
                    case 2:
                        this['animate_0'] = this['animate_1'] = this['animate_3'] = '';
                    break;
                    case 3:
                        this['animate_0'] = this['animate_1'] = this['animate_2'] = '';
                    break;
                }

            },
            changeFinish(event){ // swiper动画完成之后，给当前swiper添加动画效果
                let current = event.detail.current;
                switch(current){
                    case 0: 
                        this['animate_0'] = 'animated swing';
                    break;
                    case 1:
                        this['animate_1'] = 'animated shake';
                    break;
                    case 2:
                        this['animate_2'] = 'animated tada';
                    break;
                    case 3:
                        this['animate_3'] = 'animated heartBeat';
                    break;
                }
            },
            goChange(){
                this.item_id = 'slide1';
            }
        }
    }
</script>

<style lang="scss">
    @import '../../common/animate.css';
    
    .content {
        text-align: center;
        .content-swiper{
            height: 100vh;
            
            image{
                height: 200upx;
                width: 200upx;
                margin-top: 200upx;
            }
        }
    }
</style>

• First of all<span style="font-size: 14px;">uni-app</span> supports sass. The concise version <span style="font-size: 14px;">animate.css</span> is directly introduced into css. Problem ①
• After checking the document, I found that <span style="font-size: 14px;">circular</span>This parameter can achieve something similar The H5 page uses the function of swiper.js<span style="font-size: 14px;">loop</span> parameters. Here I fell into <span style="font-size: 14px;">uni-app</span> and <span style="font-size: 14px;"> WeChat applet</span> document description In the pit. Because I have been looking for the parameter <span style="font-size: 14px;">loop</span> (loop), I even thought that this infinite loop function could not be realized. It turns out that this parameter in the <span style="font-size: 14px;"> applet</span> is called <span style="font-size: 14px;">circular</span> (circular). o(╯□╰)o Question③
• Because I want to achieve a vertical screen sliding effect here, so the parameters <span style="font-size: 14px;">vertical</span> is set to <span style="font-size: 14px;">true</span>.
• In <span style="font-size: 14px;">uni-app</span>, via <span style="font-size: 14px;">change</span> event, you can monitor every change of the carousel screen. In this event, I recorded the subscript of the current screen <span style="font-size: 14px;">current</span>. Then cancel all css3 animations on non-current screens. Finally, in the <span style="font-size: 14px;">animationfinish</span> event, when the <span style="font-size: 14px;">swiper</span> sliding animation ends, give Add css3 animation to the elements of the current screen. Question②
• There is a ## in <span style="font-size: 14px;"></span>uni-app The #current-item-id<span style="font-size: 14px;"></span> parameter represents the item-id<span style="font-size: 14px;"></span> of the current slider. It took me a long time to read this document before I understood it. It turns out that swiper-item<span style="font-size: 14px;"></span> needs to be specified in item-id<span style="font-size: 14px;"></span>. Then when the user clicks the event, just modify the value bound to <span style="font-size: 14px;"></span>current-item-id<span style="font-size: 14px;"></span>. When my code is initialized, item-id<span style="font-size: 14px;"></span> is specified as slide2<span style="font-size: 14px;"></span> on the screen. Question ④
• The last question is to hide the H5 navigation in uni-app<span style="font-size: 14px;"></span> column. Just set pages.json<span style="font-size: 14px;"></span>#titleNView to <span style="font-size: 14px;"></span>false is enough. <span style="font-size: 14px;"></span>WeChat Mini Program Code

<!--index.wxml-->
<view class="container">
    <button bindtap=&#39;goChange&#39;>跳转到</button>
    <swiper vertical="true" circular="true" current="{{currentId}}" indicator-dots="true" bindchange="changeSwiper" bindanimationfinish="changeFinish">
        <swiper-item>
            <image src=&#39;../../static/uni.png&#39; class=&#39;animated {{animate_0}}&#39;></image>
        </swiper-item>
        <swiper-item>
            <image src=&#39;../../static/uni.png&#39; class=&#39;animated {{animate_1}}&#39;></image>
        </swiper-item>
        <swiper-item>
            <image src=&#39;../../static/uni.png&#39; class=&#39;animated {{animate_2}}&#39;></image>
        </swiper-item>
    </swiper>
</view>
//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 directory unpackage/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!