uniapp下拉刷新上拉加载

一、需求

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

二、代码

1、pages.json

2、messageBoard.vue

用了 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
		
}