小程序中的下拉刷新以及上来加载更多的实现

最新推荐文章于 2024-02-18 14:51:51 发布

一个跳街舞的程序员airenC

最新推荐文章于 2024-02-18 14:51:51 发布

阅读量164

点赞数

文章标签：小程序 vue.js

本文链接：https://blog.csdn.net/BBOY_airenC/article/details/116762428

版权

本文介绍在小程序中如何实现下拉刷新和上来加载更多的功能，以优化性能。通过示例代码，详细阐述了具体实现过程，旨在帮助开发者解决数据过多导致的性能问题。

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

在写小程序的过程中，一个页面渲染出来的数据过多的时候可能会影响到性能的问题，这时候我们就需要用到下拉刷新这类的操作了

代码如下：

举例：


  /**
   * 页面的初始数据
   */
  data: {
    box: [],
    totalPages: 1,

  },
//通常来说，再写下拉刷新时，接口中都需要我们传入响应响应的cid，pagenum，pagesize,来确定是那条对应的数据，对应的页数以及对应的每页中可接受的数量。
  QueryParams: {
    query: "",
    cid: "",
    pagenum: 0,
    pagesize: 10,
  },

  
 

  /**
   * 生命周期函数--监听页面加载
   */
//首先我们需要找到对应的cid 我这里的haha即为我自己命名的id；
  onLoad: function (options) {
    this.QueryParams.cid = options.haha
    this.list();
  },
    //通过使用async，await方法来获取到接口中的数据
  async list() {
//在进入页面时，就让默认的页数++；
    this.QueryParams.pagenum++;
//如果他大于数据中的总页数时就去执行555，但我们要的效果时需要他去执行else中的弹出框所以这样进行的判断。
    if (this.QueryParams.pagenum > this.data.totalPages) {
      console.log(5555555);

      wx.showToast({
        title: '没有下一页数据'
      });
      return false;

    }
//来连接接口并向其转递参数；
    let res = await app.http.list({
      cid: this.QueryParams.cid,
      pagenum: this.QueryParams.pagenum,
      pagesize: this.QueryParams.pagesize
    })
    let {
      data: {
        message
      }
    } = res
//这里是停止下拉刷新；
    wx.stopPullDownRefresh();
//对所有的数据进行一个从上向下的整除，从而拿到所需要的数据；
    let all = Math.ceil(message.total / this.QueryParams.pagesize);
    this.setData({
//在box中展开我所需要的数据；
      box: [...this.data.box, ...message.goods],
      totalPages: all
    })







  },
  onPullDownRefresh() {
    //这里是上拉刷新；执行一遍清空一边；就实现了刷新的效果了
    this.setData({
      box: []
    })
    this.list();
  },

希望对大家有帮助！！！！！！