WeChat Mini Program Development Guide: About Carousel

The most common one in the application is probably the carousel. This article talks about the implementation of the carousel. Part of the content comes from the official documents, and adds some problems and experiences of the author in actual operation.
This article is based on the public beta version of the WeChat applet, IDE: WeChat Developer Tool 0.10.102800

Component swiper

When the vertical attribute is not set, or When vertical="false" is set, the indicator point is at the bottom of the component, and the image rotation is from left to right. The effect is as follows:

When vertical="true" is set, the indicator point On the right side of the component, the image carousel goes from bottom to top, and the effect is as follows:

Note: swiper is a container class view, but only components can be placed in it, such as placing other nodes. , will be automatically deleted.

swiper-item

The code is as follows:

<!--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 click event

Bind the event on swiper-item and bind it through the data custom tag fixed data. Then get it through event in function.

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

Note that the corresponding data can be obtained through event in the bound function. For example: e.currentTarget.dataset.id corresponds to data-id

in wxml. Of course, there is another way. There is no need to bind events, by wrapping an a tag around each swiper-item to jump to the page as a hyperlink.

More WeChat Mini Program Development Guide: For articles related to carousels, please pay attention to the PHP Chinese website!