uniapp项目下拉刷新、上拉加载功能实现。

最新推荐文章于 2024-08-22 11:53:20 发布

我们都是柠檬精诶

最新推荐文章于 2024-08-22 11:53:20 发布

阅读量1.6k

点赞数

分类专栏： uni-app

本文链接：https://blog.csdn.net/qq_43392573/article/details/110383200

版权

uni-app 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

1、下拉刷新

（1）在 page.json 文件夹下找到对应页面，并在style下加入 — “enablePullDownRefresh”: true ，如下：

		{
			"path": "pages/order/orderList/index/index",
			"style": {
				"navigationBarTitleText": "订单",
				"navigationBarTextStyle": "white",
				"enablePullDownRefresh": true  // 允许下拉刷新
			}
		},

（2）添加下拉点击事件

<template>
	<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
	  <u-loadmore v-if="list != '' && isLoadmore" :icon-type="iconType" :status="status" :load-text="loadText" />
	</scroll-view>
</template>

（3）在 onPullDownRefresh () 生命周期函数下进行监听下拉事件

	// 下拉刷新
	onPullDownRefresh() {
		console.log('下拉刷新');
		uni.showNavigationBarLoading(); //在当前页面显示导航条加载动画。
		setTimeout(() => {
			uni.hideNavigationBarLoading();
			uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
		}, 2000);
	}