小程序图片轮播

轮播效果

先给大家看一下轮播效果：

效果实现

废话少说，我们先来上代码~
wxml:

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

wxs:

Page({
  data: {
    currentCity: '',
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: true,
    interval: 4000,
    duration: 1000,
    circular: true
  }
})

这样我们就可以看见，轮播效果已经出来了。

*注 swiper 中只可放置 swiper-item 组件，否则会导致未定义的行为。

对swiper不太了解的同学们可以看一下下面的官方文档
点这里点这里

不难发现，目前为止只是在iPhone 5 上完成了，当我们切换到其他模拟器上，你就会发现，图片横向并不能充满全局，接下来说一下优化方案

优化方法

依旧先上代码~
wxss:

.swiper{
  width: 100%;
  height: 150px;
}
.swiper-item image{
  width: 100%;
}

这里我们让图片自动充满横屏
到现在我们的轮播功能也就完成了