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

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

1. 设置数据

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

[javascript] view
plain copy

 





//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');  

  }  

})

或者：

//获取应用实例

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

 





<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 千万不要在外面  加上任何标签 例如 <view> 之类的 ，如果加了可能会导致轮播图出不来

3. 添加页面样式

创建文件 pages/test/test.wxss

[css] view
plain copy

 





.slide-image{  

    width: 100%;  

}  

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

看效果



即可看到轮播图了。