如何使用小程序制作banner图

这篇文章将为大家详细讲解有关如何使用小程序制作banner图，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

导语：

对于前端工程师来说，banner图是前端开发中必不可少的一部分。但是对于缺少了DOM的小程序来说该如何实现banner图呢？就像其他的框架封装不同的banner图的方法，小程序也封装了banner的方法。

一：准备工作

我用两张图吧，如下所示：

1.jpg

2.jpg

二：编写xsml代码（即html）

在这里我们要是用标签来进行包裹，他有如下属性：

这些属性足够我们使用，我们为了是xsml页面简洁，所以我在这里使用了for循环，将使用到的资源放进js中进行循环。而且为了使数据可进行双向绑定，所以他的属性值我打算放到js中进行配置。我的xsml代码如下：

三：js的配置

由于是双向绑定，所以我们只要在js中进行配置需要的参数即可。由于我的两张图片使用的是1.jpg和2.jpg，所以我只需要在js中进行一个小小的循环即可，这个分情况而定，你么也可以把图片的地址直接放到数组里面；最后改好了之后记得setData一下，，不然没效果，js代码如下：

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 () {   },  })

好了，，我们来看一下最终效果：

关于"如何使用小程序制作banner图"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。