小程序 : 实现上拉加载刷新效果

yiyi@yiyi

于 2024-02-28 11:37:52 发布

阅读量169

点赞数 3

文章标签：小程序

本文链接：https://blog.csdn.net/2301_78814180/article/details/136341922

版权

文章描述了如何在微信小程序中，当用户上拉滚动时，通过JavaScript操作数组实现数字的逐次累加，每次增加三个数，确保数据实时更新的过程。

摘要由CSDN通过智能技术生成

需求:当用户上拉需要数字进行累加,每次累加三个 ,例如目前是[1,2,3]累加后[1,2,3,4,5,6]

Page({

  /**
   * 页面的初始数据
   */
  data: {
    numList: [1, 2, 3]
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    wx.showLoading({
      title: '数据加载中...',
    })

    //需求 当用户上拉需要数字进行累加,每次累加三个 ,例如目前是[1,2,3]累加后[1,2,3,4,5,6]
    //思路:获取目前数组最后一项 n, n+1 , n+2, n+3 
    setTimeout(() => {
      const lastNum = this.data.numList[this.data.numList.length - 1];
      //定义需要追加的元素
      const newArr = [lastNum + 1, lastNum + 2, lastNum + 3];
      //把最新数组和目前数组进行合并
      this.setData({
        numList: [...this.data.numList, ...newArr]
      })
      wx.hideLoading()
    }, 1500)
  },


})