微信小程序-轮播图swiper-微信小程序俱乐部 www.wxappclub.com

原创声明:本文为作者原创，未经允许不得转载，经授权转载需注明作者和出处

参考资料：http://www.9miao.com/thread-113781-1-1.html

关键点: 轮播图的高度

效果

代码

/XML

<swiper class="swiper" indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="swiper-image" />
    </swiper-item>
  </block>
</swiper>

/JS

    data: {
      imgUrls: [
      '/images/swiper.png',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
    ],
  indicatorDots: true,
  autoplay: true,
  interval: 5000,
  duration: 700
  },

/CSS

.swiper {
  height: 400rpx;
  width: 100%;
}
.swiper-image {
  height: 100%;
  width: 100%;
}

作者注：寻找答案的过程中发现了一个通过获取手机系统信息来达到自适应的方法，由于我要做的小程序没有那么多图片，所以没深度学习，有兴趣的朋友可以去看看