【微信小程序】轮播图实现

新手积累，关于轮播的相关参数可查看官网~微信开发平台

居中并且带尺寸的图片:

代码：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 轮播图
    swiperPics:[],
    autoplay:true,
    interval:"2000",
    circular:true,
    duration:"1000",
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  //可循环将图片放置（后台传入使用wx.request）
    var arr = this.data.swiperPics;
    for(let i = 1;i<=3;i++){
      arr.push('../resource/image/swiper'+i+'.jpg');
    }
    
    this.setData({
      swiperPics:arr
    })
  },
  /**
  * 生命周期函数--监听页面初次渲染完成
  */
  onReady: function () {


  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

})