1：上图
image.png
2: wxml
<swiper class="swiper" indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item.url}}" class="slide-image" mode="aspectFill"/>
</swiper-item>
</block>
</swiper>
3: js文件
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
{
url:"http://pic1.win4000.com/wallpaper/9/55064ecdca763.jpg"
},
{
url: "http://pic1.win4000.com/wallpaper/1/579ebc88b52ce.jpg"
},
{
url: "http://pic1.win4000.com/wallpaper/8/5604e5440d30a.jpg"
}
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
userInfo: {}
},
............
.............
......
4: wxss
按照下面的配置，就可以解决高度的问题, 不然会出现问题，高度可以自己设置
.swiper {
height: 400rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}
5: 小知识点
**swiper **是微信小程序的一个组件，看文档, 包括swiper-item标签等
indicator-dots, autoplay,interval,duration是swiper的属性，看文档
wx：for是列表渲染，看文档， 包括block标签等
6：进一步的研究，对指示点的修改
http://www.wxapp-union.com/article-1506-1.html
