### [微信小程序轮播图功能开发实例](https://www.prosaas.cn/article/17549)

**Published:** 2018-05-25T05:56:32

**Author:** 5201314

**Excerpt:** 轮播图在应用中很常见，本文主要和大家分享微信小程序轮播图功能开发实例，希望能帮助到大家。轮播图：swiper滑…

轮播图在应用中很常见，本文主要和大家分享微信小程序轮播图功能开发实例，希望能帮助到大家。

轮播图：swiper滑块视图容器。

1.编写页面结构

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>

注意：不要在view中加css设置:display: flex;否则效果呈现不了

2.设置数据

了解属性，方可设置

![](https://img.php.cn/upload/article/000/054/025/01822b4493c0f1ac20f1b3f7854cb464-0.png)  

#### swiper-item仅可放置在`<swiper/>`组件中，宽高自动设置为100%。

在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.效果

![](https://img.php.cn/upload/article/000/054/025/adc05a2d6d7ec98a37dd3cefb1c6a08a-1.png)  

相关推荐：

react轮播图组件react-slider-light详解

jquery实现PC端轮播图代码

两种js实现轮播图的方式

以上就是微信小程序轮播图功能开发实例的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---