uniapp的下拉刷新和上拉加载

首先来说uniapp本身有对应的上拉加载和下拉刷新对应的生命周期

现在对自己一直写着的上拉加载和下拉刷新做个总结，优化

<template>
	<view class="appointment" v-if="yuershiSubscribeList.length > 0">
		<view class="list" v-for="(item,index) in yuershiSubscribeList" :key="item.id">
			<view class="detail">
				<text class="name">{{item.name}}</text>
				<text class="type">类型 : <text class="color">{{item.mom_name}}</text></text>
				<text class="time">预约时间 : {{parseInt(item.time) | c_time('yyyy-MM-dd hh:mm:ss')}}</text>
				<text class="distance">地址 : {{item.address}} </text>
			</view>
			<image class="head" :src="item.image" mode=""></image>
		</view>
	</view>
</template>

<script>
	import teacherModelClass from '@/common/model/teacher.js';
	
	const teacherModel = new teacherModelClass();
	export default {
		data() {
			return {
				loadingText: '加载中...',
				loadingType: 0,
				contentText: {
					contentdown:'上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				page:1,
				row: 10,
				yuershiSubscribeList:[],
			}
		},
		onReachBottom(){
			var  _this = this
			this.getmoreinfo();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.loadingType = 0;
			this.get_data();
			uni.stopPullDownRefresh();
		},
		onLoad() {
			this.get_data();
		},
		methods: {
			get_data(){
				let _this = this
				teacherModel.yuershiSubscribe(_this.page,_this.row).then(res => {
					console.log(res);
					if(res.code === 2){return false}
					_this.yuershiSubscribeList = res;
					console.log(JSON.stringify(this.yuershiSubscribeList))
					 
				});
			},
			// 加载更多
			getmoreinfo() {
				let _this = this;
				if (_this.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
				_this.loadingType = 1;
				_this.page ++;
				var params={
					page:_this.page,
					row: _this.row
				};
				uni.showNavigationBarLoading();//显示加载动画
				_this.post('v1/Yuershi/my_yuershi_subscribe',params,(data)=>{
					console.log(data);
					uni.hideNavigationBarLoading();//关闭加载动画
					if(data.code == 2){
						uni.showToast({
							title:'没有更多啦...',
							icon:'none',
							duration:2000
						})
						return false;
					}else{
						if (data.data == null) {//没有数据
							_this.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return;
						}
						var new_info = data.data;
						_this.yuershiSubscribeList = _this.yuershiSubscribeList.concat(new_info);//将数据拼接在一起
						_this.loadingType = 0;//将loadingType归0重置
						uni.hideNavigationBarLoading();//关闭加载动画	
					}
				});//更多会员商品
			},
		}
	}
</script>

下面是效果下拉刷新效果

下面是上拉加载效果：

这是防止重复刷新或者加载的代码(上锁)

if (_this.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
_this.loadingType = 1;

这是定义相关加载文字的data

data() {
			return {
				loadingText: '加载中...', // 加载效果动画
				loadingType: 0, // 上锁
				contentText: {
					contentdown:'上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				page:1,
				row: 10,
				yuershiSubscribeList:[],
			}
		},

这是对应的下拉刷新和上拉加载的生命周期(钩子)，在这里调用刷新加载事件

onReachBottom(){
// 这是上拉加载对应的生命周期 调用 getmoreinfo()方法，该方法是对上拉加载的一些优化
			var  _this = this
			this.getmoreinfo();
		},
onPullDownRefresh() {
// 这是上拉刷新的生命周期(钩子)
			this.page = 1;
			this.loadingType = 0;
			this.get_data();
			uni.stopPullDownRefresh(); // 这是停止上拉刷新的事件
		},