WeChat Mini-Programmentwicklungsleitfaden: Über Karussell

Das häufigste in der Anwendung ist wahrscheinlich das Karussell. Dieser Artikel befasst sich mit der Implementierung des Karussells und fügt einige Probleme und Erfahrungen des Autors im tatsächlichen Betrieb hinzu.
Dieser Artikel basiert auf der öffentlichen Betaversion des WeChat-Miniprogramms, IDE: WeChat Developer Tools 0.10.102800

Komponenten-Swiper

Wann Das vertikale Attribut ist nicht festgelegt, oder wenn Vertical="false" festgelegt ist, befindet sich der Indikatorpunkt am unteren Rand der Komponente und die Bilddrehung erfolgt von links nach rechts. Der Effekt ist wie folgt:

Wenn Vertical="true" eingestellt ist, bewegt sich der Indikatorpunkt Auf der rechten Seite der Komponente verläuft das Bildkarussell von unten nach oben, mit folgendem Effekt:

Hinweis: Swiper ist eine Containerklassenansicht, in der jedoch nur Komponenten wie andere Knoten platziert werden können.

Swiper-Item

Der Code lautet wie folgt:

<!--main.wxml-->
<view>
    <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
            autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
        <block wx:for="{{images}}">
            <swiper-item>
                <image src="{{item.picurl}}" class="slide-image"/>
            </swiper-item>
        </block>
    </swiper>
</view>

//main.js
//获取应用实例
var app = getApp()
Page({
    data: {
        indicatorDots: true,
        vertical: true,
        autoplay: true,
        interval: 3000,
        duration: 1000,
        loadingHidden: false  // loading
    },

    //事件处理函数
    swiperchange: function(e) {
        // 此处写 轮播 改变时会触发的 change 事件
    },

    onLoad: function() {
        console.log('onLoad')
        var that = this

        //sliderList
        wx.request({
            url: 'http://huanqiuxiaozhen.com/wemall/slider/list',
            method: 'GET',
            data: {},
            header: {
                'Accept': 'application/json'
            },
            success: function(res) {
                that.setData({
                    images: res.data
                })
            }
        })
    }
})

Item-Klick-Ereignis

Binden Sie das Ereignis an Swiper-Item durch Daten zur benutzerdefinierten Tag-Bindung von Daten. Dann erhalten Sie es durch das Ereignis in der Funktion.

<!--main.wxml-->
<view>
    <swiper class="swiper_box" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"
            autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
        <block wx:for="{{images}}">
            <swiper-item bindtap="itemclick" data-id="{{item.id}}" data-name="{{item.name}}">
                <image src="{{item.picurl}}" class="slide-image"/>
            </swiper-item>
        </block>
    </swiper>
</view>

// 轮播item点击事件
itemclick: function(e) {
    wx.showToast({
        title: e.currentTarget.dataset.id + "",
        icon: 'success',
        duration: 2000
    })
},

Beachten Sie, dass die entsprechenden Daten durch ein Ereignis in der gebundenen Funktion abgerufen werden können. Zum Beispiel: e.currentTarget.dataset.id entspricht data-id

in wxml. Natürlich gibt es auch einen anderen Weg. Es ist nicht erforderlich, Ereignisse zu binden, indem jedes Swiper-Element mit einem Tag versehen wird, um als Hyperlink zur Seite zu springen.

Weitere Anleitungen zur WeChat-Miniprogrammentwicklung: Artikel zum Thema Karussell finden Sie auf der chinesischen PHP-Website!