uni-app上拉加载下拉刷新

最新推荐文章于 2024-09-15 00:41:42 发布

耄耋年少

最新推荐文章于 2024-09-15 00:41:42 发布

阅读量543

点赞数 2

分类专栏： uniapp vue 文章标签： javascript

本文链接：https://blog.csdn.net/zjj0215/article/details/120076932

版权

vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

uniapp

1 篇文章 0 订阅

订阅专栏

本文详细介绍了在uni-app中如何实现父组件触发子组件的下拉刷新（onPullDownRefresh）和上拉加载（onReachBottom）功能。通过在父组件中监听这两个事件，并根据条件调用不同子组件的方法，实现了不同模块的数据刷新和加载。子组件再进一步调用孙组件的相关方法，完成实际的数据刷新和加载操作。

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

uni-app上拉加载下拉刷新

父组件中使用下拉刷新onPullDownRefresh，上拉加载 onReachBottom，分别调用子组件appear的updatePage，pulldatePage方法。

	<!-- itemlist切换 -->
			<!-- 我发现的 -->
			<discoverList v-show="title === '我发现的'" ref="discover-list" @discoverLength='discoverLength'></discoverList>
			<!-- 待我整改 -->
			<pendingGufen v-show="title === '待我整改'" ref="pendingGufen"></pendingGufen>
			<!-- 待我验证 -->
			<verify-list v-show="title === '待我验证'" ref="verify-list"></verify-list>
			<!-- 延期审核 -->
			<audit-list v-show="title === '延期审核'" ref="audit-list"></audit-list>
			<!--重点关注 -->
			<!-- <attention v-show="title === '重点关注'"></attention> -->
           **......**
//父组件
	async onPullDownRefresh() {		
		if (this.text == '我的安全') {
			await this.$refs.mySecurity.getAA0001();
		}
		if (this.text == '隐患排查' && this.getOrgFlag == 'BGTA00') {
			await this.$refs.appear.updatePage();
		}
		uni.stopPullDownRefresh();
	},
	async onReachBottom(){
		if (this.text == '隐患排查' && this.getOrgFlag == 'BGTA00') {
			await this.$refs.appear.pulldatePage();
		}
	},

子组件apper,由于模块太多，在此页面又划分了其他子组件（暂且称之为孙组件），调用孙组件pullDownRefresh，pullUpRefresh方法。

//子组件apper
	async updatePage() {
				//刷新列表
				if (this.title === '待我验证') {
					await this.$refs['verify-list'].pullDownRefresh();
				}
				if (this.title === '延期审核') {
					await this.$refs['audit-list'].pullDownRefresh();
				}
				if (this.title === '我发现的') {
					await this.$refs['discover-list'].pullDownRefresh();		
				}
				if (this.title === '待我整改') {
					await this.$refs['pendingGufen'].pullDownRefresh();
				}
			},
			async pulldatePage() {
				//刷新列表
				if (this.title === '待我验证') {
					await this.$refs['verify-list'].pullUpRefresh();
				}
				if (this.title === '延期审核') {
					await this.$refs['audit-list'].pullUpRefresh();
				}
				if (this.title === '我发现的') {
					await this.$refs['discover-list'].pullUpRefresh();		
				}
				if (this.title === '待我整改') {
					await this.$refs['abarbeitung'].pullUpRefresh();
				}
			},

//孙组件
	// 监听页面下拉刷新
			async pullDownRefresh() {
				console.log('监听页面下拉刷新')
				this.AD01.length = 0;//数据
				await this.getAD01();//重新调用页面数据接口，刷新数据
				if (this.option.renderer == 'area2') uni.showToast({
					title: '刷新成功',
					icon: 'none'
				});
				uni.stopPullDownRefresh();//停止刷新
			},
			//上拉加载
			async pullUpRefresh() {
				if (this.AD01.status == 'noMore') return;
				await this.getAD01();
			},