uni-app高性能下拉刷新上拉加载

Posted on | In

uni-app高性能下拉刷新上拉加载

mescroll-uni 是一个专门为 uni app 准备的 pullToRefresh 组件。可以帮助 uniapp 实现 下拉刷新、上拉加载的功能。

使用

  1. 在 插件市场 点击 使用 HBuilderX 导入插件

  2. 导入成功，uni-modules 文件夹下会多出 mescroll-ui 文件夹 image-20210527203409029

  3. mescroll-uni 的实现借助了 微信小程序 中的 onPullDownRefresh 和 onReachBottom 这两个 页面 事件。因为 微信小程序组件中没有这两个事件，所以 mescroll-uni 在 页面 和 组件 中的使用方式 不同

  4. mescroll-uni 在 组件 中使用分为两大块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
// 组件
<template>
  <view class="search-result-list-container">
    <!-- 1. 通过 mescroll-body 包裹列表，指定 ref 为 mescrollRef ，监听@init、@down、@up 事件 -->
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
      <!-- 循环渲染列表数据 -->
      <block v-for="(item, index) in list" :key="index">
        ...
      </block>
    </mescroll-body>
  </view>
</template>

<script>
// 2. 导入对应的 mixins
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
  // 3. 注册 mixins
  mixins: [MescrollMixin],
  data() {
    return {
      // 数据源
      list: [],
      // 页数
      page: 1,
      // 实例
      mescroll: null,
      // 处理渲染，会回调 down和up 方法，为了避免该问题，定义 init 变量，表示当前是否为首次请求
      isInit: true,
      // 是否无数据
      isEmpty: false
    };
  },
  mounted() {
    // 通过 $refs 获取组件实例
    this.mescroll = this.$refs.mescrollRef.mescroll;
  },
  methods: {
    // 4. 实现三个回调方法
    /**
     * 首次加载
     */
    mescrollInit() {
      await this.loadList();
      this.isInit = false;
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess();
    },
    /**
     * 下拉刷新的回调
     */
    downCallback() {
      if (this.isInit) return;
      this.page = 1;
      await this.loadList();
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess();
    },
    /**
     * 上拉加载的回调
     */
    upCallback() {
      if (this.isInit) return;
      this.page += 1;
      await this.loadList();
      // 结束 上拉加载 && 下拉刷新
      this.mescroll.endSuccess();
    },

    async loadList() {
      const { data: res } = await getList({
        q: this.queryStr,
        p: this.page
      });
      // 判断是否为第一页数据
      if (this.page === 1) {
        this.list = res.list;
      } else {
        this.list = [...this.resultList, ...res.list];
      }
      // 无数据，显示空数据组件
      if (this.list.length === 0) {
        this.isEmpty = true;
      }
    },
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 页面使用
<template>
  <view class="search-blog-container">
    <!-- 搜索结果 -->
    <view class="search-result-box" v-else>
      <!-- 1. 给mescroll-body的组件添加: ref="mescrollItem" (固定的,不可改,与mescroll-comp.js对应)-->
      <search-result-list ref="mescrollItem" :queryStr="searchVal" />
    </view>
  </view>
</template>

<script>
// 2. 引入mescroll-comp.js
import MescrollCompMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js';
    
export default {
  // 3. 注册 mixins
  mixins: [MescrollCompMixin],
};
</script>