Miniprogramm-Swiper-Karussell mit CSS3-Animation und zum Springen zum angegebenen Swiper-Element

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><span style="font-size: 14px;">animate.css</span>animate.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 <span style="font-size: 14px;">swiper-item</span><span style="font-size: 14px;">Swiper-Item</span> springen? Code>
Mittel. Springen Sie also zum angegebenen Bildschirm.
⑤Der Code des Applets und der H5-Version generiert einen Header und die Navigationsleiste muss in der H5-Version ausgeblendet werden.

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>

• Erstens<code><span style="font-size: 14px;">uni-app</span>uni-app unterstützt sass. Die prägnante Version <code><span style="font-size: 14px;">animate.css</span><span style="font-size: 14px;">animate.css<strong></strong></span> wird direkt in CSS eingeführt. Problem ①
• <span style="font-size: 14px;">circular</span>Nachdem ich das Dokument überprüft hatte, stellte ich fest, dass rundschreiben<span style="font-size: 14px;">loop</span> sein kann Wird mit diesem Parameter erreicht. Ähnlich der Funktion der H5-Seite mit dem Parameter swiper.js<code><span style="font-size: 14px;">uni-app</span>loop. Hier bin ich auf die Dokumentation zu <span style="font-size: 14px;">微信小程序</span><code><span style="font-size: 14px;">uni-app</span><span style="font-size: 14px;">loop</span> und WeChat-Applet<span style="font-size: 14px;">小程序</span> gestoßen Beschreiben Sie die Grube. Da ich nach dem Parameter <span style="font-size: 14px;">circular</span>loop (loop) gesucht habe, dachte ich sogar, dass diese Endlosschleifenfunktion nicht realisiert werden könnte. Es stellt sich heraus, dass dieser Parameter im Miniprogramm
• circular<span style="font-size: 14px;">vertical</span> (Kreis) . o(╯□╰)o Problem ③<span style="font-size: 14px;">true</span>
Da ich hier einen vertikalen Bildschirmgleiteffekt erzielen möchte, sind die Parameter
• <span style="font-size: 14px;">vertikal</span><code><span style="font-size: 14px;">uni-app</span> ist auf true<span style="font-size: 14px;">change</span> gesetzt. <span style="font-size: 14px;">current</span>in uni-app<span style="font-size: 14px;">animationfinish</span> über <code><span style="font-size: 14px;">swiper</span>Ä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><span style="font-size: 14px;">uni-app</span><span style="font-size: 14px;">animationfinish</span><span style="font-size: 14px;">current-item-id</span>-Ereignis, wenn der Swiper<span style="font-size: 14px;">item-id</span> endet, Fügen Sie den Elementen des aktuellen Bildschirms eine CSS3-Animation hinzu. Problem ②<span style="font-size: 14px;">swiper-item</span><span style="font-size: 14px;">item-id</span>Es gibt ein <span style="font-size: 14px;">current-item-id</span><code><span style="font-size: 14px;">uni-app</span><span style="font-size: 14px;">item-id</span> code><span style="font-size: 14px;">current-item-id</span><span style="font-size: 14px;">slide2</span> Parameter, der die <strong>item-id</strong> 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><span style="font-size: 14px;">uni-app</span>swiper-item >. Wenn der Benutzer dann auf das Ereignis klickt, ändern Sie einfach den an <code><span style="font-size: 14px;">pages.json</span>current-item-id gebundenen Wert. Wenn mein Code initialisiert wird, wird <span style="font-size: 14px;">titleNView</span><span style="font-size: 14px;">item-id</span><span style="font-size: 14px;">false</span> als slide2 auf diesem Bildschirm.

Frage④

Die letzte Frage ist H5, versteckt in der unpackage/dist/build/h5<br>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;
        }
    }
})

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!