WeChat applet carousel function development example

Carousel images are very common in applications. This article mainly shares with you the development examples of the WeChat applet carousel image function, hoping to help everyone.

Carousel chart: swiper slider view container.

1. Write the page structure

##pages/index/index. wxml

<!--index.wxml-->
<view>
	<swiper indicator-dots="{{indicatorDots}}"  
	        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  
	      	<block wx:for="{{imgUrls}}">  
		        <swiper-item>  
		           	<navigator url="{{item.link}}" hover-class="navigator-hover">  
		            	<image src="{{item.url}}" class="slide-image" width="355" height="150"/>  
		           	</navigator>   
		        </swiper-item>  
	      	</block>  
	</swiper> 
</view>

Note: Do not add css settings in the view: display: flex; otherwise The effect cannot be displayed

2.Setting data

Understand Property before setting

#swiper-item can only be placed in the

component, and the width and height are automatically set to 100%.

Set data in index.js

##

//index.js  
//获取应用实例  
var app = getApp()  
Page({
	data: {  
        imgUrls: [  {  
			link:'/pages/index/index',  
			url:'../uploads/a01.jpg'   
        },{  
			link:'/pages/logs/logs',  
			url:'../uploads/a02.jpg'  
        },{  
			link:'/pages/user/user',  
			url:'../uploads/a03.jpg'    
        }   
    ],  
	    indicatorDots: true,  
	    autoplay: true,  
	    interval: 5000,  
	    duration: 1000
	} 
})

3. Effect

##Related recommendations:

detailed explanation of react carousel component react-slider-light

jquery implements PC-side carousel chart code

Two js ways to implement carousel chart

The above is the detailed content of WeChat applet carousel function development example. For more information, please follow other related articles on the PHP Chinese website!