大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

用微信小程序如何实现banner轮播图

这篇文章给大家分享的是有关用微信小程序如何实现banner轮播图的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联建站是一家专业从事成都做网站、成都网站设计的网络公司。作为专业网站设计公司,创新互联建站依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、成都全网营销推广及网站设计开发服务!

用微信小程序实现banner轮播图

一:准备工作

我用两张图吧,如下所示:

用微信小程序如何实现banner轮播图用微信小程序如何实现banner轮播图

二:编写xsml代码(即html)

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

用微信小程序如何实现banner轮播图用微信小程序如何实现banner轮播图这些属性足够我们使用,我们为了是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轮播图

感谢各位的阅读!关于“用微信小程序如何实现banner轮播图”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网页名称:用微信小程序如何实现banner轮播图
文章转载:http://dzwzjz.com/article/jejgop.html
在线咨询
服务热线
服务热线:028-86922220
TOP