小程序上拉刷新下拉加载

最新推荐文章于 2024-05-07 09:50:33 发布

始于颜值终于你

最新推荐文章于 2024-05-07 09:50:33 发布

阅读量402

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_47768765/article/details/121533646

版权

本文介绍了如何在微信小程序中封装自定义组件，实现loadMore()上拉加载更多数据和refreshData()下拉刷新功能。通过实例展示了API调用、数据合并和状态管理的过程，以及在页面中触发这些事件的方法。

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

小程序上拉刷新下拉加载

我封装了一个自定义组件在methods里面定义了2个时间
loadMore（）上拉加载 refreshData（）下拉刷新

// toal 为后台返回的总条数 pagenum 为页数
// 上拉加载
loadMore: function () {
  // console.log(this.data.statistical.total) //19
  const total = this.data.statistical.total;
  // console.log(this.data.customerList.length) //10 19
  if (total > this.data.customerList.length) {
    this.setData({
      pagenum: this.data.pagenum + 1
    }, () => {
      this.loadData();
    })
  }else{
    wx.showToast({
      title: '已经是最后一页了哦',
      icon:'none'
    })
  }
},
// 下拉刷新
refreshData: function () {
  this.setData({
    pagenum: 1
  }, () => {
    this.loadData();
  })
}

//customerList 为上一页与当前页合并的数组
loadData: async function (queryObject) {
  // console.log(this.properties.pagenum)
  // 在组件实例进入页面节点树时执行
  const memberRepData = await apiLoadMemberList();
  if (memberRepData.code == 0) {
    let members = {};
    memberRepData.data.forEach((item) => {
      members[item.userId] = item
      // console.log(item)
    })

    // console.log(members)
    this.setData({
      members
    })
  }
  const repData = await apiLoadCustomers(
    this.data.pagenum,
    false,
    -1,
    '',
    queryObject
  )
  if (repData.code == 0) {
    let customers = {};
    repData.data.list.forEach((item) => {
      item.memberIdArray = item.memberIdStr.split(',');
      let firstWord = pinyin.getFirstLetter(item.directoryName).substring(0, 1); //客户名字首字母
      if (customers[firstWord]) {
        customers[firstWord].push(item)
      } else {
        customers[firstWord] = [item]
      }
      item.refreshTime = formatDateToStr(item.refreshTime, '前')
    })
    if (this.data.pagenum != 1) {
      customers = {
        ...customers,
        ...this.data.customers
      }
    }
    let anchorList = Object.keys(customers);
    anchorList.push("#")
    anchorList.sort()
    if (anchorList.indexOf('#') != -1) {
      anchorList.splice(anchorList.indexOf('#'), 1)
      anchorList.push("#")
    }
    // console.log(anchorList)
    // console.log(repData.data)
    if(this.data.pagenum  == 1){
      this.setData({
        customerList:repData.data.list
      })
    }else{
      this.setData({
        customerList: [...repData.data.list, ...this.data.customerList],
      })
    }
    this.setData({
      customers,
      anchorList, //首字母
      isLoading: false,
      statistical: repData.data,
    })
    try {
      this.triggerEvent("updateCountData", {
        memberLostCount: repData.data.memberLostCount
      })
    } catch (error) {

    }
  }
},

在页面中调用

/**
 * 页面相关事件处理函数--监听用户下拉动作
 */
onPullDownRefresh: function () {
  let myComponent = this.selectComponent('#customerltem'); // 页面获取自定义组件实例
  myComponent.refreshData(); // 通过实例调用组件事件
},

/**
 * 页面上拉触底事件的处理函数
 */
onReachBottom: function () {
  let myComponent = this.selectComponent('#customerltem'); // 页面获取自定义组件实例
  myComponent.loadMore(); // 通过实例调用组件事件
}