【uniapp】 下拉刷新页面

前言

• Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）
• 关于怎么拉：对于下拉还是上拉我是分不清的（不管叫下拉还是上拉，都应该有参照物的。在不说参照物的前提下，叫上拉也行，叫下拉也行。）按照uniapp的说法叫用户下拉动作/下拉刷新。本文采用下拉刷新页面的叫法。
• 实际交流中，很多人把下拉理解为加载更多数据。不管怎么拉，比较保险的交流方式是：配合上手势。一边比划一边说。

如何实现

uniapp 内置提供了名为 onPullDownRefresh 的页面生命周期函数。该函数可以实现下拉刷新页面的功能。

监听用户下拉动作，一般用于下拉刷新

注意事项

支付宝小程序startPullDownRefresh在开发者工具里会提示暂未开放，请勿使用。

此种情况下，去uniapp的插件市场搜索其它方法。

另，调用uni.startPullDownRefresh函数的效果与用户手动下拉刷新一致。

实现

开启下拉刷新页面的功能

需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。

	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"enablePullDownRefresh":true,
			}
		}
	]

onPullDownRefresh 函数

index.vue

<script>
	export default {
		components: {
		},
		data() {
			return {
			}
		},
		async onLoad(options) {
			console.log("onLoad")
		},
		onReady(){
		},
		async onPullDownRefresh() {
			console.log("onPullDownRefresh");
		},
		methods: {
		}
	}
</script>

停止下拉刷新的动画

当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

下拉刷新的动画会自动停止，但为了更好的体验，手动停止更好一些。

async onPullDownRefresh() {
	console.log("onPullDownRefresh");
	
	await this.loadFavorite();
	
	uni.stopPullDownRefresh();
},

参考

https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f