uni-app上拉加载事件

最新推荐文章于 2025-09-20 11:05:27 发布

原创最新推荐文章于 2025-09-20 11:05:27 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

前端学习专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了uni-app中实现上拉加载功能的步骤和技巧，从监听滚动事件到设置下拉刷新和上拉加载的配置，再到数据加载与列表渲染的实现，帮助开发者优化用户体验，提升应用性能。

import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
export default {
		components: {
		   uniLoadMore,
		},
			data() {
			return {
				status: 'more',
				currentPage:1,
				totalPages :0,
				statusTypes: [{
					value: 'more',
					text: '加载前'
				}, {
					value: 'loading',
					text: '正在加载..'
				}, {
					value: 'noMore',
					text: '没有更多'
				}],
				contentText: {
					contentdown: '亲~到最后一页啦！',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			};
		},
	// 上拉加载
	onReachBottom() {
		var that = this
		this.status = 'loading'
		uni.showNavigationBarLoading()
		 setTimeout(function() {
			that.status = 'more'
			uni.hideNavigationBarLoading()
	        if(that.totalPages > that.currentPage){
	            that.currentPage = that.currentPage + 1 ;
	             that.getCarList();   //刷新页面
				 //回到页面顶部
				 uni.pageScrollTo({
				 	scrollTop: 0,
				 	duration: 0
				 	})
	        }else{
				that.currentPage = that.totalPages ;
	            this.status='noMore';
				uni.hideNavigationBarLoading()
	        }
		 }, 1000);
	},