uniapp 实现 下拉分页加载数据

uniapp 实现 下拉分页加载数据

很多列表页总数量很大，一次性查询加载会导致页面有很长时间的空白期，自然体验感极差。就会使用分页加载数据，后端默认传入第一页固定的条数，下拉的时候再次查询加载新的数据，那么如何实现呢？

正式开始之前先介绍两个函数：

1. onPullDownRefresh
   在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
• 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。
  第一点很重要，有的时候代码写好了，然后怎么下拉都不会刷新加载数据， 就是因为没有设置enablePullDownRefresh。

2. onReachBottom
   页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。

接下来看一下如何实现：

<template>
  <view>
    <view class="list-item" v-for="(item, index) in list" :key="item.id">
      <text>{{ item.note }}</text>
    </view>
    <load-more :loadingType="loadingType" />
  </view>
</template>

1. 循环返回的数据
2. 用到一个load-more组件。

定义一些用得到的参数：

data() {
    return {
      params: {
        pageNo: 1,
        pageSize: 10
      },

      list: [],
      loadingType: ""
    };
  },

  methods: {
    onPullDownRefresh() {
      this.loadData();
      uni.stopPullDownRefresh();
    },
    onReachBottom() {
      this.loadData("more");
    },
    async loadData(type = "refresh") {
      if (type === "refresh") {
        this.$showLoading("加载中");
        this.params.pageNo = 1;
      } else if (this.loadingType === "nomore") {
        return;
      }
      this.loadingType = "loading";
      try {
        let {
          pageList: { list }
        } = await this.$api.massageList(this.params.pageNo, this.params.pageSize);
        let loadingType = "";
        if (list.length === 0) {
          if (type === "refresh") loadingType = "nodata";
          if (type === "more") loadingType = "nomore";
        }
        this.loadingType = loadingType;
        this.params.pageNo++;
        list.forEach(item => {
          item.actionParams = JSON.parse(item.actionParams);
        });
        this.list = type === "refresh" ? list : this.list.concat(list);
        if (type === "refresh") {
          await this.$setTime(300);
          uni.hideLoading();
        }
      } catch (error) {
        this.loadingType = "";
      }
    }
  }
};

1. 如果你要修改后端给的数据，要在this.list 之前修改，不然永远只改了前几条数据

list.forEach(item => {
          item.actionParams = JSON.parse(item.actionParams);
        });
  this.list = type === "refresh" ? list : this.list.concat(list);

参数的页数开始发生变化。这个视频转成git太差了，看个大概吧。哈哈哈(￣□￣｜｜尴尬的笑~~~)