Guide de développement du mini programme WeChat : à propos du carrousel

Le plus courant dans l'application est probablement le carrousel. Cet article parle de la mise en œuvre du carrousel. Une partie du contenu provient des documents officiels et ajoute quelques problèmes et expériences de l'auteur en fonctionnement réel.
Cet article est basé sur la version bêta publique du mini-programme WeChat, IDE : WeChat Developer Tools 0.10.102800

Component swiper

Quand l'attribut vertical n'est pas défini, ou Lorsque vertical="false" est défini, le point indicateur est en bas du composant et la rotation de l'image se fait de gauche à droite. L'effet est le suivant :

.

Lorsque vertical="true" est défini, le point indicateur Sur le côté droit du composant, le carrousel d'images va de bas en haut, avec l'effet suivant :

Remarque : swiper est une vue de classe conteneur, mais seuls les composants, tels que d'autres nœuds, peuvent y être placés et seront automatiquement supprimés.

swiper-item

Le code est le suivant :

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

événement de clic sur l'élément

Lier l'événement sur swiper-item via données de liaison de balises personnalisées. Ensuite, récupérez-le via l'événement en fonction.

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

Notez que les données correspondantes peuvent être obtenues via un événement dans la fonction liée. Par exemple : e.currentTarget.dataset.id correspond à data-id

dans wxml. Bien sûr, il existe un autre moyen. Il n'est pas nécessaire de lier des événements, en enroulant une balise a autour de chaque élément de swiper pour accéder à la page sous forme de lien hypertexte.

Pour plus de guides de développement de mini-programmes WeChat : pour les articles liés aux carrousels, veuillez faire attention au site Web PHP chinois !