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

轮播图，不外乎俩个要素，跳转链接 和 图片地址

1. 设置数据

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

[javascript]  view plain  copy

 

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. })

或者：

1. //获取应用实例
   var util = require('../../utils/md5.js') 
   var app = getApp()
   Page({
     data: {  
        autoplay: true,
        dotsBoll: true,
        interval: 2000,
        duration: 1000,
        current:0
     },
     onLoad: function () {
       var that = this
       wx.request({
           url:'http://www.tpshop.com/index.php?m=Api&c=Base&a=getServerTime',//获取服务器时间戳
           success:function(arr){
             // console.log(arr.data.result)
             var unique_id = '123456789'
             var nowtime = arr.data.result
                 // var time =new Date()
                 // time = time.getTime()/1000  //获取当前时间
             var signs = util.hexMD5(unique_id+nowtime+'123456')
             // console.log(signs)
               wx.request({
                 url: 'http://www.tpshop.com/index.php?m=Api&c=Index&a=home', //仅为示例，并非真实的接口地址,tpshop首页
                 method:"POST",
                 data: {
                     unique_id:unique_id,
                     time:nowtime,
                     sign:signs
                 },
                 header: {
                     'content-type': 'application/x-www-form-urlencoded'
                 },
                 success: function(res) {
                   console.log(res.data.result)
                     that.setData({
                       imgUrls:res.data.result.ad,  //直接找到图片数组
                       goods:res.data.result.goods  //直接找到数据数组
                     })
                 }
               })
           }
       })
     }
   })
   

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

indicatgorRots 是否出现焦点

autoplay  是否自动播放

interval  自动播放间隔时间

duration 滑动动画时间

更多样式编辑请参看文档  https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1475052054228

2. 部署到页面

找到 文件 pages/test/test.wxml

[html]  view plain  copy

 

1. <swiper indicator-dots="{{indicatorDots}}"  
2.         autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  
3.       <block wx:for="{{imgUrls}}">  
4.         <swiper-item>  
5.            <navigator url="{{item.link}}" hover-class="navigator-hover">  
6.             <image src="{{item.url}}" class="slide-image" width="355" height="150"/>  
7.            </navigator>   
8.         </swiper-item>  
9.       </block>  
10. </swiper>  

注意： swiper 千万不要在外面  加上任何标签 例如 <view> 之类的 ，如果加了可能会导致轮播图出不来

3. 添加页面样式

创建文件 pages/test/test.wxss

[css]  view plain  copy

 

1. .slide-image{  
2.     width: 100%;  
3. }  

加上上面的样式可以使 轮播图的宽度达到100% 然后更漂亮点，当然可以根据自己的喜好罗！

看效果

即可看到轮播图了。