微信小程序之swiper轮播图

微信小程序，一个不是app胜似app的开发工具，更加准确的说是开发途径，给非专业开发app的同学们提供了一个绝妙的选择

轮播图几乎是每一个网站、app必有得一个展示区，用于醒目自己的特点、特色。了解微信小程序开发的同学都会知道它的目录以及.js、.wxml、.wxss的所代表的文件意义

在index.wxml中使用swiper(滑块视图容器)做轮播图

<swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
  <swiper-item class="banner">
    <image src="{{item}}" class="slide-image" width="355px" height="150px"/>
  </swiper-item>
  </block>
</swiper>

在index.js文件中定义imgUrls数组以及swiper的各个属性值，其属性代表什么含义参考开发文档 https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1476197489605

Page({
    data: {
    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: false,
    interval: 5000,
    duration: 1000
  }
})

注：在小编的测试过程中，发现，如果swiper被<view></view>等标签包围的话是不能出现轮播图的，也可能是技不如人吧

最后，调试，就会展现轮播图。试试吧，如果不行，可以留言交流