Mini programme d'animation CSS3 du carrousel de swiper et utilisation pour accéder à l'élément de swiper spécifié

Mon compte public WeChat : Le chemin vers la culture frontale, bienvenue pour me suivre.

Problèmes qui doivent être résolus

Ces derniers jours, j'ai cherché comment créer un carrousel de swiper pour les mini-programmes WeChat. Parce que je dois générer à la fois le code du mini-programme et la version H5 du code, il serait inefficace d'écrire deux ensembles, j'ai donc choisi uni-app.

uni-appL'animation du carrousel a été directement prise en charge dans le composant de base swiper.

Ce que je dois principalement résoudre, ce sont les problèmes suivants :

• ①Comment ajouter le populaire CSS3 <code><span style="font-size: 14px;">animate.css</span>animate.css dans swiper animate.css dans swiper
• Animation.
• ②Si vous faites glisser l'image du carrousel après l'avoir ajoutée, comment pouvez-vous vous assurer que l'animation sur l'écran suivant ne se joue pas automatiquement.
• ③Comment réaliser une lecture en boucle infinie d'images de carrousel. <span style="font-size: 14px;">swiper-item</span>④Comment cela peut-il être réalisé ? Lorsque l'utilisateur clique sur un bouton, il peut accéder au
élément de balayage
• code>Moyen. Autrement dit, passez à l'écran spécifié.

⑤Le code de l'applet et de la version H5 générera un en-tête, et la barre de navigation devra être masquée dans la version H5. uni-app小程序小程序uni-appCe qui suit est l’intégralité de mon processus de production, à titre de référence seulement. De plus, le code est développé par

, il n'y a donc aucun problème à tester dans les mini programmes et H5. De plus, afin de faciliter la compréhension des

étudiants en développement, le code de la version et le code seront fournis à titre de référence.

animate.cssImplémentation du code-webkit-animation

Animate.css est souvent utilisé dans le développement H5. Il est naturellement pris en charge dans WeChat, car WeChat a des restrictions de taille sur les mini-programmes téléchargés, j'ai donc utilisé ici un

très simplifié, qui supprimait beaucoup de CSS3 commençant par . Parce que nous n'avons besoin d'exécuter que de petits programmes et H5, cela n'aura pas beaucoup d'impact. Vous pouvez l'obtenir à partir du code ci-dessous si nécessaire. Jetons d'abord un coup d'œil au code :

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

• Premièrement<code><span style="font-size: 14px;">uni-app</span>uni-app prend en charge l'audace. La version concise <code><span style="font-size: 14px;">animate.css</span><span style="font-size: 14px;">animate.css<strong></strong></span> est directement introduite dans le CSS. Problème ①
• <span style="font-size: 14px;">circular</span>Après avoir vérifié le document, j'ai découvert que la circulaire<span style="font-size: 14px;">loop</span> peut être obtenu avec ce paramètre Semblable à la fonction de la page H5 en utilisant le paramètre swiper.js<code><span style="font-size: 14px;">uni-app</span>loop. Ici, je suis tombé dans la documentation <span style="font-size: 14px;">微信小程序</span><code><span style="font-size: 14px;">uni-app</span><span style="font-size: 14px;">loop</span> et applet WeChat<span style="font-size: 14px;">小程序</span> Décrivez la fosse. Parce que je cherchais le paramètre <span style="font-size: 14px;">circular</span>loop (loop), j'ai même pensé que cette fonction de boucle infinie ne pouvait pas être réalisée. Il s'avère que ce paramètre dans le mini programme
• s'appelle circulaire<span style="font-size: 14px;">vertical</span> (encercler) . o(╯□╰)o Problème ③<span style="font-size: 14px;">true</span>
• Parce que je veux obtenir ici un effet de glissement d'écran vertical, donc les paramètres vertical<code><span style="font-size: 14px;">uni-app</span> est défini sur <code><span style="font-size: 14px;">change</span>true. <span style="font-size: 14px;">current</span> dans <code><span style="font-size: 14px;">animationfinish</span>uni-app via <span style="font-size: 14px;">swiper</span><span style="font-size: 14px;">changer<strong></strong>Événement, vous pouvez surveiller chaque changement de l'écran du carrousel. Dans cet événement, j'ai enregistré l'indice de l'écran actuel </span><code>
current
• . Annulez ensuite toutes les animations css3 de écran non courant<code><span style="font-size: 14px;">uni-app</span>. Enfin, dans l'événement animationfinish<span style="font-size: 14px;">current-item-id</span>, lorsque le <code><span style="font-size: 14px;">item-id</span>swiper termine le animation coulissante, ajoutez une animation CSS3 aux éléments de l'écran actuel. <span style="font-size: 14px;">swiper-item</span>Problème ②<code><span style="font-size: 14px;">item-id</span>Il y a un <span style="font-size: 14px;">current-item-id</span>uni-app<code><span style="font-size: 14px;">item-id</span> paramètre code>current-item-id<span style="font-size: 14px;">slide2</span>, représentant le item-id
du curseur actuel . Il m'a fallu beaucoup de temps pour lire ce document avant de le comprendre. Il s'avère que vous devez spécifier
• <code><span style="font-size: 14px;">item-id</span><span style="font-size: 14px;">uni-app</span><span style="font-size: 14px;">swiper-item</span><span style="font-size: 14px;">pages.json</span>>. Ensuite, lorsque l'utilisateur clique sur l'événement, modifiez simplement la valeur liée à current-item-id<span style="font-size: 14px;">titleNView</span>. Lorsque mon code est initialisé, <code><span style="font-size: 14px;">false</span>item-id est spécifié comme

slide2

sur cet écran. Question④

unpackage/dist/build/h5

La dernière question est H5 cachée dans

<a href="https://www.php.cn/weixin-marketing.html" target="_blank">uni-app</a>

Barre de navigation . Définissez simplement titleNView sur dans pages.json > faux suffit. Code du programme WeChat Mini

<!--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;
        }
    }
})

J'ai hébergé le code sur la plateforme de développement Tencent Cloud, vous pouvez vous y référer si nécessaire. Dans le répertoire de code , il y a la page de version H5 générée. Il convient de noter que lorsqu'il est déployé sur un serveur Web, le protocole de fichier local n'est pas pris en charge. Deux versions du code sont générées pour votre référence. Tutoriel recommandé : "Programme WeChat Mini"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!