Carousel function of WeChat mini program

高洛峰
Release: 2018-05-28 10:55:15
Original
3271 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: [
            '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
        })
    },
})
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template