uniapp下拉刷新上拉加载

﹏ヽ暗。殇╰゛Y 2021-09-03 04:51 670阅读 0赞

## 一、需求 ##

留言板主页，显示所有的留言信息，带有分页功能；上拉加载数据，下拉刷新数据

## 二、代码 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]  
1、pages.json  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]  
2、messageBoard.vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 2]  
用了 uniapp 提供的组件： uni-load-more.vue

<uni-load-more :status="loadingText" :contentText="contentText" ></uni-load-more>

const loadingTextObj = { 
    	more: 'more',
    	noMore: 'noMore',
    	loading: 'loading'
    }
    const contentTextObj = { 
    	contentdown: '上拉显示更多',
    	contentrefresh: '正在加载...',
    	contentnomore: '没有更多数据了'
    }
    data() { 
    	return { 
    		// 分页功能
    		loadingText: loadingTextObj.more,
    		loadingType: 0, // 定义加载方式 0---contentdown 1---contentrefresh 2---contentnomore
    		contentText: contentTextObj,
    	}
    },
    //下拉刷新
    onPullDownRefresh() { 
    	console.log('下拉刷新')
    	this.initPageInfo()
    },
    //触底加载更多
    onReachBottom(e) { 
    	const _this = this
    	console.log('触底加载更多')
    	if (timer != null) { 
    		clearTimeout(timer)
    	}
    	timer = setTimeout(function() { 
    		if (_this.loadingType === 2) return false
    		else _this.doMoreData()
    	}, 1000)
    },
    methods: { 
    	initPageInfo() { 
    		const _this = this
    			
    		page = 1
    		this.messageInfo = []
    		this.doLoadingStatus(0)
    
    		uni.showNavigationBarLoading()
    		// 接口联调
    		this.doMessageBoard()
    		
    		return false
    		setTimeout(() => {  // 这里面是模拟的假数据
    			page++ // 得到数据之后page+1
    			_this.messageInfo = messageData // messageData为自己造的假数据
    			
    			uni.hideNavigationBarLoading()
    			uni.stopPullDownRefresh() // 得到数据后停止下拉刷新
    		}, 1000)
    	},
    	// 加载状态
    	doLoadingStatus(type) { 
    		if (type === 0) { 
    			this.loadingType = 0
    			this.loadingText = loadingTextObj.more
    		}else if (type === 1) { 
    			this.loadingType = 1
    			this.loadingText = loadingTextObj.loading
    		} else if (type === 2) { 
    			this.loadingType = 2
    			this.loadingText = loadingTextObj.noMore
    		}
    	},
    	// 获取留言板列表
    	doMessageBoard() { 
    		const _this = this
    		let opts={ 
    			url: '/***',
    			method: 'POST'
    		}
    		let param={ 
    			page: page,
    			pageSize: pageSize,
    		}
    		this.HTTP.httpFromDataRequest(opts, param).then(res => { 
    			if(res.data.success){ 
    				const {  data } = res.data
    				
    				if (data.list === null) { 
    					_this.doLoadingStatus(2)
    					uni.hideNavigationBarLoading() // 关闭加载动画
    					return
    				}
    				
    				page++ // 得到数据之后page+1
    				
    				if (_this.messageInfo.length === 0) _this.messageInfo = data.list
    				else _this.messageInfo = [..._this.messageInfo, ...data.list]
    				
    				if (data.list.length < pageSize) { 
    					_this.doLoadingStatus(2)
    				} else{  // 将loadingType归0重置
    					_this.doLoadingStatus(0)
    				}
    				
    				uni.hideNavigationBarLoading(); // 关闭加载动画
    				uni.stopPullDownRefresh() // 得到数据后停止下拉刷新
    			}else{ 
    				uni.showToast({ 
    					title: res.data.message
    				})
    			}
    		},error => { console.log(error);})
    	},
    	// 分页功能---加载更多数据
    	doMoreData() { 
    		const _this = this
    		if (this.loadingType !== 0) { // loadingType != 0 直接返回
    			return false
    		}
    		this.doLoadingStatus(1)
    		
    		uni.showNavigationBarLoading()
    		this.doMessageBoard()
    		
    		return false
    		setTimeout(() => { 
    			const res = { 
    				data: null
    			}
    			res.data = '111'
    			if (res.data === null) { 
    				_this.loadingType = 2
    				_this.loadingText = loadingTextObj.noMore
    				uni.hideNavigationBarLoading() // 关闭加载动画
    				return
    			}
    			page++ // 每触底一次 page +1
    			_this.messageInfo = [..._this.messageInfo, ...messageData]
    			_this.loadingType = 0; // 将loadingType归0重置
    			_this.loadingText = loadingTextObj.more
    			uni.hideNavigationBarLoading(); // 关闭加载动画
    		}, 3000)
    	}, // end doMoreData
    		
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]: /images/20210804/53536a28273c4a5cbd1544c44386ec3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 1]: /images/20210804/1e99048fa55743909dfe7c7b18679e5a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70 2]: /images/20210804/9ee88021362f47838b0d6df3e96e3819.png

发表评论取消回复

表情：

评论列表（有 0 条评论，670人围观）

还没有评论，来说两句吧...

相关阅读

相关上拉加载下拉刷新

老方法，先上效果图： ![1264306-20190925171702811-981213350.gif][] 1.加入下拉刷新上拉加载的依赖 1 //下拉刷新

一时失言乱红尘/ 2023年08月17日 17:09/ 0 赞/ 102 阅读

相关 uniapp的下拉刷新和上拉加载

首先来说uniapp本身有对应的上拉加载和下拉刷新对应的生命周期现在对自己一直写着的上拉加载和下拉刷新做个总结，优化 <template> <view

小鱼儿/ 2023年05月22日 08:43/ 0 赞/ 45 阅读

相关 uniapp 下拉刷新和上拉加载更多

uniapp 下拉刷新和上拉加载更多实现代码，兼容小程序，H5，app，真机测试可用。实现代码 1.在页面写这两方法，分别是下拉刷新和下拉触底的监听事件 //

淩亂°似流年/ 2022年10月28日 03:41/ 0 赞/ 221 阅读

相关下拉刷新上拉加载

下拉刷新： ![Center][] ![Center 1][] ![Center 2][] 上划加载 ![Center 3][] ![C

约定不等于承诺〃/ 2022年07月17日 02:22/ 0 赞/ 308 阅读

相关 RecyclerView 上拉加载下拉刷新

RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout and

以你之姓@/ 2022年01月07日 12:13/ 0 赞/ 337 阅读

相关 uniapp 上垃加载下拉刷新 mescroll

![在这里插入图片描述][20190814112757569.png] <template> <mescroll-uni :down="downOption

以你之姓@/ 2021年10月19日 01:34/ 0 赞/ 581 阅读

相关 mui上拉刷新下拉加载

废话不多说，直接上代码 1、容器  <div id="refreshContainer" class="mui-content m

Dear 丶/ 2021年09月15日 16:48/ 0 赞/ 398 阅读

相关 uniapp下拉刷新上拉加载

一、需求留言板主页，显示所有的留言信息，带有分页功能；上拉加载数据，下拉刷新数据二、代码 ![在这里插入图片描述][watermark_t

﹏ヽ暗。殇╰゛Y/ 2021年09月03日 04:51/ 0 赞/ 671 阅读

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

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

「爱情、让人受尽委屈。」/ 2021年07月25日 12:15/ 0 赞/ 892 阅读

相关 uniapp的上拉加载和下拉刷新

> 插件地址 [https://ext.dcloud.net.cn/plugin?id=29\detail][https_ext.dcloud.net.cn_plugin_id

灰太狼/ 2021年07月25日 00:55/ 0 赞/ 703 阅读