Mein öffentliches WeChat-Konto: Der Weg zur Front-End-Kultivierung, willkommen, mir zu folgen.

Probleme, die gelöst werden müssen

In den letzten Tagen habe ich mir überlegt, wie man ein Swiper-Karussell für WeChat-Miniprogramme erstellt. Da ich sowohl den Code für das Miniprogramm als auch die H5-Version des Codes generieren muss, wäre es ineffizient, zwei Sätze zu schreiben, also habe ich mich für uni-app entschieden.

uni-appKarussellanimationen wurden direkt in der Basiskomponente Swiper unterstützt.

Was ich hauptsächlich lösen muss, sind die folgenden Probleme:

①Wie füge ich das beliebte CSS3 <code>animate.cssanimate.css in Swiper hinzu Animation.
②Wenn Sie das Karussellbild verschieben, nachdem Sie es hinzugefügt haben, wie können Sie dann sicherstellen, dass die Animation auf dem nächsten Bildschirm nicht automatisch abgespielt wird?
③So erreichen Sie eine Endlosschleifenwiedergabe von Karussellbildern.
④Wie kann das erreicht werden, wenn der Benutzer auf eine Schaltfläche klickt, kann er oder sie zum angegebenen swiper-itemSwiper-Item springen? Code>

uni-app小程序Das Folgende ist mein gesamter Produktionsprozess, nur als Referenz. Darüber hinaus wurde der Code von 小程序 entwickelt, sodass das Testen in Miniprogrammen und H5 kein Problem darstellt. Um das Verständnis von uni-app Entwicklungsstudenten zu erleichtern, werden außerdem der

Versionscode und der

Code als Referenz bereitgestellt.

Code-Implementierung

animate.css-webkit-animationAnimate.css wird häufig in der H5-Entwicklung verwendet. Es wird natürlich in WeChat unterstützt, da WeChat Größenbeschränkungen für hochgeladene Miniprogramme hat. Daher habe ich hier ein sehr vereinfachtes

verwendet, das viele CSS3-Dateien gelöscht hat, die mit

beginnen. Da wir nur kleine Programme und H5 ausführen müssen, wird dies keine großen Auswirkungen haben. Bei Bedarf können Sie es über den folgenden Code abrufen.

Schauen wir uns zuerst den Code an:

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

Nach dem Login kopieren

Erstens<code>uni-appuni-app unterstützt sass. Die prägnante Version <code>animate.cssanimate.css wird direkt in CSS eingeführt. Problem ①
circularNachdem ich das Dokument überprüft hatte, stellte ich fest, dass rundschreibenloop sein kann Wird mit diesem Parameter erreicht. Ähnlich der Funktion der H5-Seite mit dem Parameter swiper.js<code>uni-apploop. Hier bin ich auf die Dokumentation zu 微信小程序<code>uni-apploop und WeChat-Applet小程序 gestoßen Beschreiben Sie die Grube. Da ich nach dem Parameter circularloop (loop) gesucht habe, dachte ich sogar, dass diese Endlosschleifenfunktion nicht realisiert werden könnte. Es stellt sich heraus, dass dieser Parameter im Miniprogramm
circularvertical (Kreis) . o(╯□╰)o Problem ③true
vertikal<code>uni-app ist auf truechange gesetzt. currentin uni-appanimationfinish über <code>swiperÄndernEreignis, Sie können jede Änderung des Karussellbildschirms überwachen. In diesem Fall habe ich den Index des aktuellen Bildschirms current
aufgezeichnet. Brechen Sie dann alle CSS3-Animationen des nicht aktuellen Bildschirms ab. Schließlich, im <code>uni-appanimationfinishcurrent-item-id-Ereignis, wenn der Swiperitem-id endet, Fügen Sie den Elementen des aktuellen Bildschirms eine CSS3-Animation hinzu. Problem ②swiper-itemitem-idEs gibt ein current-item-id<code>uni-appitem-id code>current-item-idslide2 Parameter, der die item-id des aktuellen Schiebereglers darstellt . Es hat lange gedauert, bis ich dieses Dokument gelesen habe, bis ich es verstanden habe. Es stellt sich heraus, dass Sie

<li>item-id<span style="font-size: 14px;"></span>
</li>

<code>uni-app

<code>pages.json

titleNView

item-id

false

Frage④

Die letzte Frage ist H5, versteckt in der unpackage/dist/build/h5 uni-app

Navigationsleiste . Setzen Sie einfach titleNView

auf in pages.json > false reicht aus. WeChat Mini-Programmcode

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

Nach dem Login kopieren

Ich habe den Code auf der Tencent Cloud Developer Platform gehostet, Sie können bei Bedarf darauf zurückgreifen. Im Codeverzeichnis befindet sich die generierte H5-Versionsseite. Es ist zu beachten, dass bei der Bereitstellung auf einem Webserver das lokale Dateiprotokoll nicht unterstützt wird. Zu Ihrer Referenz werden zwei Versionen des Codes generiert. Empfohlenes Tutorial: „WeChat Mini-Programm“

Das obige ist der detaillierte Inhalt vonMiniprogramm-Swiper-Karussell mit CSS3-Animation und zum Springen zum angegebenen Swiper-Element. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!