uni-app小程序开发-下拉刷新和上拉加载更多

发表于 更新于 分类于
uni-app小程序开发-下拉刷新和上拉加载更多

下拉刷新

pages.json中添加enablePullDownRefresh属性

1
2
3
4
5
6
7
{
  "path": "order/order_list",
  "style": {
    "navigationBarTitleText": "订单列表",
    "enablePullDownRefresh": true
  }
}

页面中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export default {
	data() {
		return {
			orderList: [],
			page: 1,
			size: 10,
			hasMore: true
		};
	},
	// 下拉刷新
	async onPullDownRefresh() {
		console.log('下拉刷新');
		this.page = 1;
		this.hasMore = true;
		await this.actionList();
		uni.stopPullDownRefresh();
	},
}

上拉加载更多

1
2
3
4
5
6
7
<scroll-view
             scroll-y="true"
             @scrolltolower="loadMoreAction"
             class="z_height_100vh"
             >
  <!--数据列表-->
</scroll-view>

注意scroll-view必须有明确的高度（比如固定的高度或者是应为弹性布局而有确定的高度）

JS中

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
export default {
  data() {
    return {
      orderList: [],
      page: 1,
      size: 10,
      hasMore: true
    };
  },
  mounted() {
    this.actionList();
  },
  // 下拉刷新
  async onPullDownRefresh() {
    console.log('下拉刷新');
    this.page = 1;
    this.hasMore = true;
    await this.actionList();
    uni.stopPullDownRefresh();
  },
  methods: {
    async loadMoreAction() {
      if (this.hasMore) {
        console.log('加载更多');
        this.page += 1;
        await this.actionList();
      }
    },
    async actionList() {
      let { page, size, status } = this;
      let result = await apiGetOrderList(page, size);
      if (result.code == 0) {
        if (page == 1) {
          this.orderList.length = 0;
        }
        this.orderList.push(...result.obj);
        if (result.obj.length == 0) {
          this.hasMore = false;
        }
      }
    }
  }
}