除了 Vue 的生命周期之外,uniapp 也有一套自己的页面生命周期 😁,它们依然和 data 等方法同级

监听页面初始化

onInit(){}

监听页面的加载

它的参数是上个页面所传递的数据,参数类型是对象类型(用于页面之间的传参)

 onLoad (options) { }

监听页面的显示

页面每次出现在屏幕上都会触发,包括从下级页面点返回露出当前页面

onShow () {}

监听页面初次渲染完成

onReady () {}

监听页面的隐藏

onHide () {}

监听页面的卸载

onUnload() {}

监听窗口尺寸变化

仅支持:App、微信小程序、快手小程序

onResize () {}

监听用户下拉动作

这个相比起来是比较好玩的,因为你可以在用户做出下拉动作的同时做出一些交互,比如下拉刷新

onPullDownRefresh () {}

我们模拟一下下拉刷新:

people:[
					{
						name:'张山',
						id:101
					},
					{
						name:'李四',
						id:102
					},
					{
						name:'王五',
						id:103
					},
					{
						name:'王麻子',
						id:104
					},
					{
						name:'小瘪三',
						id:105
					}
				]

比如我们从服务器拿来这样一串用户信息,我们想要下拉刷新之后进行一个顺序的改变

		onPullDownRefresh () {
			setTimeout(()=>{
				this.people = [
					
						{
							name:'李四',
							id:102
						},
						{
							name:'小瘪三',
							id:105
						},
						{
							name:'王五',
							id:103
						},
						{
							name:'张山',
							id:101
						},
						{
							name:'王麻子',
							id:104
						}
				]
				uni.stopPullDownRefresh()
			},2000)
		}

我使用一个定时器模拟一下真实的请求事件,否则刷新会很快,我们几乎看不到任何效果数据的顺序就发生了改变

uni.stopPullDownRefresh()将停止页面的刷新动作

页面滚动到底部

onReachBottom () {}

这个函数官方也指明了,并不是将页面滚动到底部,而是用于下拉刷新的,我们打开浏览器一直向下滑动不就是下拉刷新吗? 😆

这个和下拉刷新是一样的用法,当然我们也可以去设置具体滚动到的位置 – 在页面的style节点中配置 onReachBottomDistance 就可以手动配置加载下一个页面所处的位置了

		{
			"path": "pages/list/list",
			"style": {
				"onReachBottomDistance": 300
			}
		}

其他函数

还有很多函数 比如:onTabItemTap() 点击 tab 时触发,不过都是有对应的应用场景的,并不是任何平台都适用,微信小程序居多 🤔

点击查看页面生命周期

Logo

前往低代码交流专区

更多推荐