uni-app 下拉刷新，上拉加載更多

 上拉刷新： 

參考文檔：https://uniapp.dcloud.io/api/ui/pulldown?id=onpulldownrefresh

在 js 中定義 onPullDownRefresh 處理函數（和onLoad等生命週期函數同級），監聽該頁面用戶下拉刷新事件。

• 需要在 pages.json 裏，找到的當前頁面的pages節點，並在 style 選項中開啓 enablePullDownRefresh

 

pages.json 

"pages": [{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "uni-app",
		"enablePullDownRefresh": true
	}
}],

index.vue

onLoad() {
	this.getmsg()
	setTimeout(function() {
		console.log('start pulldown');
	}, 1000);
	uni.startPullDownRefresh();//開始下拉刷新
},
// 下拉刷新
onPullDownRefresh() {
	let _self = this
	console.log('refresh');
	setTimeout(function() {
		uni.stopPullDownRefresh();//停止當前頁面下拉刷新
		_self.page=1;
		_self.getmsg();
	}, 1000);
},
// 上拉加載
onReachBottom() {
	let _self = this
	uni.showNavigationBarLoading()
	console.log('reach');
	setTimeout(function() {
		_self.page++;
		_self.getmsg();
		uni.hideNavigationBarLoading()
	}, 2000);
},

 請求接口後：

success: (res) => {
	console.log(res);
	if(res.data.data.length==0){
		_self.contentText='沒有更多了'
		uni.showToast({title:'沒有更多數據了',icon:"none"});
	}
	if(_self.page!=1){
	_self.datas =_self.datas.concat(res.data.data)
	}else{
		_self.datas =res.data.data
	}
}

 

 

 

 

uni.showNavigationBarLoading()    //打開加載更多動畫

uni.hideNavigationBarLoading()    //關閉加載更多動畫


this.msglist =this.msglist.concat(res.data.data)    //concat()方法連接兩個或多個數組


//屏幕到底部時候觸發此事件(和methods同級)可搭配成上拉刷新
onReachBottom() {
	console.log('reach');
}