微信小程序实现轮播图

1. 设置数据
我在 pages/test/test.js中添加如下数据

//test.js  
//获取应用实例  
var app = getApp()
Page({
  data: {
    imgUrls: [
      {
        link: '/pages/index/index',
        url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
      }, {
        link: '/pages/logs/logs',
        url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
      }, {
        link: '/pages/test/test',
        url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
      }
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 500,
    duration: 100,
    userInfo: {}
  },
  onLoad: function () {
    console.log('onLoad test');
  }
}) 

其中 imgUrls 是我们轮播图中将要用到的 图片地址和 跳转链接
indicatgorRots 是否出现焦点

autoplay 是否自动播放

interval 自动播放间隔时间

duration 滑动动画时间

1. 部署到页面
   找到 文件 pages/test/test.wxml

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

注意： swiper 千万不要在外面 加上任何标签 例如 之类的 ，如果加了可能会导致轮播图出不来
3. 添加页面样式
创建文件 pages/test/test.wxss

.slide-image{  
    width: 100%;  
}