微信小程序轮播图

1确定轮播图所在的页面

在该页面的.wxml中先创建view标签

<view class="container">
	<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
		<block wx:for="{{movies}}" wx:for-index="index">
			<swiper-item>
				<image src="{{item.url}}" class="slide-image" mode="aspectFill"/>
			</swiper-item>
		</block>
    </swiper>
</view>

其中的属性

这里是通过遍历movies[ ] 数组，实现的，

<swiper-item>

就是item

2 提供movies[ ]数组

在对应的.wxml的js文件中，在page中的data中，创建movies数组

//index.js
//获取应用实例
var app=getApp()
	Page({
		data:{
			movies:[
			{url:'/images/001.jpg'},
    	    {url:'/images/002.jpg'},
            {url:'/images/003.jpg'}
					]
			},
			onLoadL function(){
}
})

其中movies数组的url地址也可以是网络连接的形式

3 轮播图的样式

找到同文件目录下的.wxss设置样式

/*index.wxss*/
.swiper{
	height:400rpx;
	width:100%;
}
.swiper image{
	height:100%;
	width:100%
}

样式可以自己随便修改最后达到轮播图的效果，可以通过上边提到过的关键字进行设置，自动轮播的时间等。