除了 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 时触发,不过都是有对应的应用场景的,并不是任何平台都适用,微信小程序居多 🤔文章来源:https://www.toymoban.com/news/detail-644148.html
点击查看页面生命周期文章来源地址https://www.toymoban.com/news/detail-644148.html
到了这里,关于uniapp -- 页面生命周期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!