uniapp带参返回上一级

396 阅读1分钟

前言

遇到个需求是在A页面点击搜索框,跳转到B页面列表里面选择用户,然后将选择的用户带回A页面。经过资料查证,可行的方法有三种,这里简要记录一下。

通过事件注册的方式

B页面在页面生命周期 onBackPress 里面做事件的触发,和传参,具体代码如下,

//B页面
<script>  
    export default {  
        data() {  
            return {};  
        },  
        onBackPress(options) {  
           uni.$emit('updateQuery', 'someThingData')
           uni.navigateBack({  
               delta: 1  //返回层级
           }); 
        },  
  
    }  
 </script> 
 
 //A页面在onshow里面监听该方法即可
 onShow(){
     uni.$on('updateQuery', data => {
         console.log("来自B页面的传参," + data)
     })
 }
 

注意:页面生命周期onBackPress 只对app、H5、支付宝小程序生效,其余平台无效,为了更好的兼容性,最好是在当前页面即B页面onUnload生命周期内做事件的注册和传参。

//B页面
<script>  
    export default {  
        data() {  
            return {};  
        },  
        onUnload() {  
           uni.$emit('updateQuery', 'someThingData')
        },  
  
    }  
 </script> 

通过在返回上一页的成功回调中注册事件

//B页面
<script>  
    export default {  
        data() {  
            return {};  
        },  
        methods:{
            goBack(){
                uni.navigateBack({  
                   delta1,  
                   success(res) => {  
                       //通过uni传递
                       uni.$emit('updateQuery', 'someThingData');
                        
                       // 或者通过eventChannel向被打开页面传送数据
                       res.eventChannel.emit('updateQuery', 'someThingData')

                   }
               })
            }
        }
  
    }  
 </script> 
 
 //A页面在onshow里面监听该方法即可
 onShow(){
     uni.$on('updateQuery', data => {
         console.log("来自B页面的传参," + data)
     })
     //对应eventChannel监听
     const eventChannel = this.getOpenerEventChannel();
     eventChannel.on('updateQuery', data => {
         console.log("来自B页面的传参," + data)
     });
 
 }
 

通过getCurrentPages()获取前页面栈

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

//B页面
<script>  
    export default {  
        data() {  
            return {};  
        },  
        methods:{
            onUnload(){
                // 获取当前页上的栈
                var pages = getCurrentPages(); 
                //当前页面
                var currentPage = pages[pages.length - 1];
                //上一页面 
                var prevPage = pages[pages.length - 2];
                //上两页 以此类推 
                var prevAgainPage = pages[pages.length - 3];
                //直接找到要修改的页面 获取修改页面实例 修改数据
                prevPage.$vm.updateQuery = 'someThingData'
            }
        }
  
    }  
 </script> 
 
 //A页面无需监听 可直接使用
 onShow(){
    console.log(this.updateQuery)
 }