Karussellfunktion des WeChat-Miniprogramms

高洛峰
Freigeben: 2018-05-28 10:55:15
Original
3243 Leute haben es durchsucht

Die Anweisungen zum Karussell finden Sie auf der offiziellen Website. Hier ist ein Beispiel, um den Implementierungseffekt der Karussellfunktion des WeChat-Applets zu veranschaulichen:

Werfen wir zunächst einen Blick auf das Rendering:

Karussellfunktion des WeChat-Miniprogramms

JS-Code:

var app = getApp();
Page({
    data: {
        imgUrls: [
            'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
        ],
        indicatorDots: true,
        autoplay: false,
        interval: 5000,
        duration: 1000
    },
    changeIndicatorDots: function(e) {
        this.setData({
            indicatorDots: !this.data.indicatorDots
        })
    },
    changeAutoplay: function(e) {
        this.setData({
            autoplay: !this.data.autoplay
        })
    },
    intervalChange: function(e) {
        this.setData({
            interval: e.detail.value
        })
    },
    durationChange: function(e) {
        this.setData({
            duration: e.detail.value
        })
    },
})
Nach dem Login kopieren

Daten sind die festzulegenden Daten. Legen Sie fest, ob IndicatorDots gepunktet ist, das Intervall legt fest, wie viele Millisekunden gewechselt werden sollen, und die Dauer legt die Geschwindigkeit des Wechsels fest. Gehen Sie alle Fotos durch. Diese Werte werden durch Daten übergeben und dann in der Funktion festgelegt.

WXML-Code:

<swiper indicator-dots="{{indicatorDots}}"
        autoplay="true" interval="5000" duration="1000">
    <block wx:for="{{imgUrls}}">
        <swiper-item>
            <image src="{{item}}" class="slide-image" width="400" height="150"/>
        </swiper-item>
    </block>
</swiper>
Nach dem Login kopieren

Das Obige ist der Prozess dieses Karussells, die Hauptanwendungskomponenten, die Autoplay-Einstellung, ob die automatische Wiedergabe erfolgen soll, die Intervalleinstellung, die jede Millisekunde umschaltet, die Dauereinstellung der Umschaltgeschwindigkeit. Gehen Sie alle Fotos durch.

Der Karusselleffekt kann durch einfache Konfiguration erreicht werden, die sehr einfach zu implementieren ist.

Weitere Artikel zur Karussellfunktion von WeChat-Miniprogrammen finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!