微信小程序五（创建轮播图）

//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: 5000,  

    duration: 1000,  

    userInfo: {}  

  },  

  onLoad: function () {  

    console.log('onLoad test');  

  }  

})  
其中 imgUrls 是我们轮播图中将要用到的 图片地址和 跳转链接

indicatgorRots 是否出现焦点

autoplay  是否自动播放

interval  自动播放间隔时间

duration 滑动动画时间

 部署到页面

找到 文件 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>