WeChat applet Development Guide: About Carousel

The most common application should be the wheel chart. This article describes the implementation of Carousel. part of the content comes from the official documentation and adds some problems and experiences in the actual operation of the author. The most common application should be the wheel chart. This article describes the implementation of Carousel. part of the content comes from the official documentation and adds some problems and experiences in the actual operation of the author.
This article is based on the mini-program public beta version, IDE: developer tool 0.10.102800

Swiper

Note: swiper is a container-class view, but only components can be placed in it. if other nodes are placed, the view is automatically deleted.

Swiper-item

The code is as follows:

// Main. js // Obtain the application instance var app = getApp () Page ({data: {indicatorDots: true, vertical: true, autoplay: true, interval: 3000, duration: 1000, loadingHidden: false // loading}, // Event Processing function swiperchange: function (e) {// The change event triggered when carousel change is written here}, onLoad: function () {console. log ('onload') var that = this // sliderList wx. request ({url: 'http: // huanqiuxiaozhen.com/wemall/slider/list', method: 'GET', data :{}, header: {'access': 'application/json'}, success: function (res) {that. setData ({images: res. data })}})}})

Item click event

Bind events on swiper-item and bind data using the data custom tag. Then we can get it through event in the function.

// Carousel item click event itemclick: function (e) {wx. showToast ({title: e. currentTarget. dataset. id + "", icon: 'success', duration: 2000 })},

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

Of course, there is another way. You do not need to bind events. by adding a label to the outer part of each swiper-item, you can jump to the page through a hyperlink.

More small program Development Guide: For carousel related articles, please follow the PHP Chinese network!