uniapp中页面跳转的几种方式及生命周期(整理)

页面跳转的方式:

保留当前页面,跳转到应用内的某个页面
uni.navigateTo({
    
    
    url:"test?id=1&name=uniapp"
})

关闭当前页面,跳转到应用内的某个页面
uni.redirectTo({
    
    
    url:"test?id=1&name=uniapp"
})


跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
uni.switchTab({
    
    
    url:"test?id=1&name=uniapp"
})


关闭所有页面,打开到应用内的某个页面 字节跳动小程序不支持
uni.reLaunch({
    
    
    url:"test?id=1&name=uniapp"
})

关闭当前页面,返回上一页面或多级页面
uni.navigateBack({
    
    
    url:"test?id=1&name=uniapp"
}

生命周期

onLoad() {
    
    
 	console.log('页面加载')
},
onShow() {
    
    
    console.log('页面显示')
},
onReady(){
    
    
    console.log('页面初次显示')
},
onHide() {
    
    
    console.log('页面隐藏')
},
onUnload() {
    
    
    console.log('页面卸载')
},
onBackPress(){
    
    
  	 console.log('页面返回...')
},
onShareAppMessage() {
    
    
     console.log('分享')
 },
 onReachBottom() {
    
    
     console.log('下拉加载...')
 },
 onPageScroll(){
    
    
     console.log('页面滚动...')
 },
onPullDownRefresh() {
    
    
    console.log('上拉刷新...')
    uni.stopPullDownRefresh();
},
1、页面的加载过程是 : 加载-显示-加载完成-页面隐藏-页面卸载
2、页面生命周期的出发过程 : onLoad:监听页面加载 --> onShow:监听页面显示 --> onReady:监听页面初次渲染完成 --> onHide:监听页面隐藏 --> onUnload:监听页面卸载
3、onLoad跟onLoadonShow的区别
   (1)onShow: 监听页面显示。页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
    例如:页面b:通过缓存跳转到页面a
    页面B:缓存一个变量newMember   uni.setStorageSync('newMember', this.newMember)
    页面A可以接受这个参数变量:onShow() {
    
     let str = uni.getStorageSync('newMember') },
   (2) onLoad:只加载一次,监听页面加载,其参数为上个页面传递的数据,参数类型为Object(用于页面传参)
   只加载一次 所以如果b页面不断的修改数据 再通过 onLoad(){
    
      uni.navigateBack({
    
    delta: 1,})   回到A页面 a页面的数据不会随之改变

总结:A页面跳转到B页面后,从二级页面B返回该页面A时,onLoad不会再次加载,而onshow会重新加载。

4、如果从一个页面携带参数跳转到另外一个页面,在另一个页面获取参数的方式: onLoad(options){
    
     console.log(options.xxx) },这些参数都挂在在options.
5、在一些数据变化较少的时候我们用onload  

onLoad先于onShow执行
onLoad页面的整个生命周期里,只执行一次
onShow页面的整个生命周期里,可执行多次,即每次显示都会执行
获取参数并且只请求一次的事件放在 onLoad 里。
当前页面需要时时刷数据的请求多次的事件放在 onShow 里。

猜你喜欢

转载自blog.csdn.net/qq_38881495/article/details/126174382
今日推荐