Table of Contents

Problems that need to be solved" >Problems that need to be solved

Code implementation" >Code implementation

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. " >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.

Home

Web Front-end

JS Tutorial

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

hzc

Jun 22, 2020 am 11:32 AM

html5 uni-app WeChat applet

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 animate.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 specified swiper-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 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>

Copy after login

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

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn