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>animate.cssanimate.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. swiper-item④Comment cela peut-il être réalisé ? Lorsque l'utilisateur clique sur un bouton, il peut accéder au
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>

Copier après la connexion

Premièrement<code>uni-appuni-app prend en charge l'audace. La version concise <code>animate.cssanimate.css est directement introduite dans le CSS. Problème ①
circularAprès avoir vérifié le document, j'ai découvert que la circulaireloop peut être obtenu avec ce paramètre Semblable à la fonction de la page H5 en utilisant le paramètre swiper.js<code>uni-apploop. Ici, je suis tombé dans la documentation 微信小程序<code>uni-apploop et applet WeChat小程序 Décrivez la fosse. Parce que je cherchais le paramètre circularloop (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 circulairevertical (encercler) . o(╯□╰)o Problème ③true
Parce que je veux obtenir ici un effet de glissement d'écran vertical, donc les paramètres vertical<code>uni-app est défini sur <code>changetrue. current dans <code>animationfinishuni-app via swiperchangerÉ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 <code>
. Annulez ensuite toutes les animations css3 de écran non courant<code>uni-app. Enfin, dans l'événement animationfinishcurrent-item-id, lorsque le <code>item-idswiper termine le animation coulissante, ajoutez une animation CSS3 aux éléments de l'écran actuel. swiper-itemProblème ②<code>item-idIl y a un current-item-iduni-app<code>item-id paramètre code>current-item-idslide2, représentant le item-id
<code>item-iduni-appswiper-itempages.json>. Ensuite, lorsque l'utilisateur clique sur l'événement, modifiez simplement la valeur liée à current-item-idtitleNView. Lorsque mon code est initialisé, <code>falseitem-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;
        }
    }
})

Copier après la connexion

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!