uni-app单个页面的生命周期函数- 前端开发

除了整体应用的生命周期，每一个页面都有自己的生命周期
我们先来看看代码

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad(optins) {
            console.log('页面加载完成',optins);
		},
		onShow() {
			console.log('页面显示');
		},
		onReady() {
			console.log("页面初次显示完成");
		},
		onHide() {
			console.log("页面隐藏");
		},
		onUnload() {
			console.log("页面销毁");
		},
		onPullDownRefresh() {
			console.log("用户触发下拉刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom(){
			console.log("页面滚动到底，加载下一页");
		},
		methods: {
          experiment() {
			  uni.startPullDownRefresh()
		  }
		}
	}
</script>

onLoad :页面加载完成后执行的生命周期函数会携带一个对象类型的参数
里面是上一个页面跳转向当前页面时传递的参数，如果没传或者是首页面则该参数为空

onShow :当页面被显示时触发的生命周期，初次加载页面，tabBar切换至其他页面后再切换回当前页后触发

onReady :页面第一次显示完成时触发后面就只会触发onShow了

onHide :页面隐藏时触发最常见的就是底部tabBar切换到其他页面时会触发

onUnload :当前页面被销毁时触发简单说就是路由跳走了

onPullDownRefresh :当用户将页面向下拉动时触发
因为这个方法触发后上面那个旋转的图标好久才会消失，我们大可不必浪费这个时间如果你要让用户下拉时刷新数据那么在刷新完数据后你可以直接调用uni.stopPullDownRefresh()动态图标就消失了
需要注意的时如果pages.json给页面设置的enablePullDownRefresh为false 那么这个生命周期是不会触发的

然后是是天然的分页工具 onReachBottom 当页面滚动到最底部时触发,当然，如果你的页面元素高度不够连滚动条都没出来那你肯定触发不到滚动到底部的效果,我们可以通过pages.json给当前页面的style中的onReachBottomDistance设置数值，例如我们写

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "uni-app",
		"onReachBottomDistance":200,
		"enablePullDownRefresh":true
	}
}],

1
2
3
4
5
6
7
8
9
10