uniapp下拉重新整理上拉加載

一、需求

留言闆首頁，顯示所有的留言資訊，帶有分頁功能；上拉加載資料，下拉重新整理資料
           

二、代碼

1、pages.json

2、messageBoard.vue

用了 uniapp 提供的元件： uni-load-more.vue

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
		
}