Carousel function of WeChat mini program-Mini Program Development-php.cn

Carousel function of WeChat mini program

高洛峰

Release： 2018-05-28 10:55:15

Original

3208 people have browsed it

We can see the instructions related to the carousel on the official website. Here is an example to illustrate the implementation effect of the carousel function of the WeChat applet:

Let’s take a look at the renderings first:

Carousel function of WeChat mini program

JS code:

var app = getApp();
Page({
    data: {
        imgUrls: [
            &#39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg&#39;,
            &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg&#39;,
            &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg&#39;
        ],
        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
        })
    },
}）

Copy after login

data is the data to be set. Set whether indicatorDots is dotted, interval sets how many milliseconds to switch, and duration sets the speed of switching. Iterate through all the photos. These values are passed through data and then set in the function.

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>

Copy after login

The above is the process of this carousel, the main application components, autoplay sets whether to play automatically, interval sets how many milliseconds to switch, and duration sets the switching speed. Iterate through all the photos.

The carousel effect can be achieved through simple configuration, and it is very easy to implement.

For more articles related to the carousel function of WeChat mini programs, please pay attention to the PHP Chinese website!