小程序 swiper组件常见应用

<swiper  indicator-dots="true" circular="true" autoplay="true" interval="2000" duration="500"
previous-margin="20px"  next-margin="20px" easing-function="linear" display-multiple-items="1"
>
 <swiper-item wx:for="{{swiperImgUrls}}" >
 <image src='{{item.url}}' mode='aspectFill' class="img"></image>
 </swiper-item>
</swiper>



 data: {
    swiperImgUrls: [{
      id: 0,
      type: 'image',
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
    }, {
      id: 1,
      type: 'image',
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',
    }, {
      id: 2,
      type: 'image',
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
    }, {
      id: 3,
      type: 'image',
      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
    }]

  },



.img{ width: 100%; height: 100%;}

图片模式     mode    aspectFill  缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

                   widthFix   缩放模式，宽度不变，高度自动变化，保持原图宽高比不变