微信小程序里运用相关技术实现 banner 轮播图的方式

<swiper indicator-dots="{{indicatorDots}}"

        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">

      <block wx:for="{{arr}}">

        <swiper-item>

            <image src="{{item}}" class="slide-image" width="355" height="150"/>

        </swiper-item>

      </block>

</swiper>

Page({

  /**

   * 页面的初始数据

   */

  data: {

    mode:"scaleToFill",

    arr:[],

    indicatorDots: true,

    autoplay: true,

    interval: 2000,

    duration: 1000,

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    var array = this.data.arr

    for (let i = 1; i < 3; i++) {

      array.push("img/" + i + ".jpg")

    }

    this.setData({ arr: array})

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

  },

})