uniapp上拉加载更多，下拉刷新

在pages.json文件中配置一下 “enablePullDownRefresh”: true

<template>
	<view>
		<view v-for="(item, index) of newList" :key="index" class="newList">{{ item }}</view>
		<view class="loading" v-if="loading">{{ loadingTxt }}</view>
	</view>
</template>

<script>
let page = 1,
	timer = null;
export default {
	data() {
		return {
			newList: [],
			loading: false,
			finished: false,
			loadingTxt: '加载更多'
		};
	},
	onLoad(e) {
		this.getNews();
	},
	onPullDownRefresh() {
		this.loading = true;
		//下拉的生命周期
		this.getNews();
	},
	onReachBottom() {
		//阻止重复加载
		if (timer !== null) {
			clearTimeout(timer);
		}
		timer = setTimeout(() => this.getMoreNews(), 500);
		// this.getMoreNews()
	},
	methods: {
		//下拉刷新事件
		getNews() {
			this.finished = false;
			this.loadingTxt = '加载中';
			page = 1;
			//标题读取样式激活
			uni.showNavigationBarLoading();
			setTimeout(() => {
				this.newList = 10;
				//停止下拉样式
				uni.stopPullDownRefresh();
				//隐藏标题读取
				uni.hideNavigationBarLoading();
				this.loading = false;
				page++;
			}, 1500);
		},
		//加载更多的新闻
		getMoreNews() {
			if (this.finished) {
				return 0;
			}
			this.loadingTxt = '加载中';
			this.loading = true;
			uni.showNavigationBarLoading();
			setTimeout(() => {
				//停止下拉样式
				uni.stopPullDownRefresh();
				//隐藏标题读取
				uni.hideNavigationBarLoading();
				if (this.newList > 30) {
					this.loadingTxt = '已经加载全部';
					this.finished = true;
					return;
				}
				this.newList += 10;
				this.loading = false;
				page++;
			}, 1500);
		}
	}
};
</script>

<style lang="scss">
.newList {
	line-height: 2em;
	padding: 20px;
}
.loading {
	line-height: 2em;
	text-align: center;
	color: #888;
	margin-top: 30rpx;
}
</style>