除了整体应用的生命周期,每一个页面都有自己的生命周期
我们先来看看代码
<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}
}],
“onReachBottomDistance”:200, 的意思就是当页面滚动离底部还有200px时就触发onReachBottom
我们可以在逻辑运行中直接调用uni.startPullDownRefresh() 这样就会直接触发onPullDownRefresh而不需要下拉页面