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({
/**
* 頁面的初始數(shù)據(jù)
*/
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
按照下面的配置，就可以解決高度的問題, 不然會出現(xiàn)問題重父，高度可以自己設(shè)置
.swiper {
height: 400rpx;
width: 100%;
}
.swiper image {
height: 100%;
width: 100%;
}
5: 小知識點
**swiper **是微信小程序的一個組件花椭，看文檔, 包括swiper-item標(biāo)簽等
indicator-dots, autoplay,interval,duration是swiper的屬性，看文檔
wx：for是列表渲染房午，看文檔矿辽， 包括block標(biāo)簽等
6：進一步的研究，對指示點的修改
http://www.wxapp-union.com/article-1506-1.html
