uni-app下拉刷新

在uni-app主要主要有两种方式进行下拉刷新，一种是通过 onPullDownRefresh() 方法进行，另一种是通过按钮点击触发。不过需要在page.json中配置才行。具体可以参考uni-app官网: 下拉刷新地址.

在page.json文件配置对应的page节点，并在style中将enablePullDownRefresh设置为true，开启下拉刷新

"page":[
 {
			"path": "pages/classify/classify",
			"style": {
				"navigationBarTitleText": "分类",
				//开启下拉刷新
				"enablePullDownRefresh":true,
				//页面上拉触底事件触发时距页面底部距离，单位只支持px
				"onReachBottomDistance":100
			}
	}]

在classfiy.vue中，通过onPullDownRefresh()监听下拉刷新的动作，数据更新后，可以通过uni.stopPullDownRefresh()关闭下拉刷新。

		//监听下拉刷新
		onPullDownRefresh() {
			console.log('触发下拉刷新');
			setTimeout(()=>{
				this.list=[...this.list,...[11,22,33,332]];
				
				//关闭下拉刷新
				uni.stopPullDownRefresh();
			},1000)
		},

通过按钮调用uni.startPullDownRefresh()也可以触发下拉刷新的。

<button @click="fresh()">点我触发下拉刷新</button>
export default {
		methods: {
			//通过按钮点击触发下拉刷新
			fresh(){
				uni.startPullDownRefresh()
			}
		}
}

完整的代码：

<template>
	<view>
		<button @click="fresh()">点我触发下拉刷新</button>
		<view class="box-item" v-for="(item,index) in list" :key="index">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					"前端程序",
					"java",
					"es6"
				]
			}
		},
		//监听下拉刷新
		onPullDownRefresh() {
			console.log('触发下拉刷新');
			setTimeout(()=>{
				this.list=[...this.list,...[11,22,33,332]];
				//关闭下拉刷新
				uni.stopPullDownRefresh();
			},1000)
		},
		
		//距离底部100px时（page中配置过），触发该事件页面滚动到底部的事件（不是scroll-view滚到底）
		onReachBottom(){
			console.log('页面触底了');
			this.list=[...this.list,...['JavaScript','css']];
		},
		
		methods: {
			//通过按钮点击触发下拉刷新
			fresh(){
				uni.startPullDownRefresh()
			}
			
		}
	}
</script>
<style scoped>
	.box-item{
		padding: 40rpx;
		text-align: center;
		border: 1px solid red;
	}
</style>