小程序之图片轮播swiper实践，高度问题解决

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