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

1. //test.js  
2. //获取应用实例  
3. var app = getApp()  
4. Page({  
5.   data: {  
6.       imgUrls: [  
7.        {  
8.           link:'/pages/index/index',  
9.           url:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'   
10.        },{  
11.           link:'/pages/logs/logs',  
12.           url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'   
13.        },{  
14.           link:'/pages/test/test',  
15.           url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'   
16.        }   
17.     ],  
18.     indicatorDots: true,  
19.     autoplay: true,  
20.     interval: 5000,  
21.     duration: 1000,  
22.     userInfo: {}  
23.   },  
24.   onLoad: function () {  
25.     console.log('onLoad test');  
26.   }  
27. })  

其中 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>