WeChat applet carousel function development example-Mini Program Development-php.cn

WeChat applet carousel function development example

小云云

Release： 2018-05-25 13:56:32

Original

5786 people have browsed it

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>

Copy after login

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:&#39;/pages/index/index&#39;,  
			url:&#39;../uploads/a01.jpg&#39;   
        },{  
			link:&#39;/pages/logs/logs&#39;,  
			url:&#39;../uploads/a02.jpg&#39;  
        },{  
			link:&#39;/pages/user/user&#39;,  
			url:&#39;../uploads/a03.jpg&#39;    
        }   
    ],  
	    indicatorDots: true,  
	    autoplay: true,  
	    interval: 5000,  
	    duration: 1000
	} 
})

Copy after login

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!