PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HBuilderX教程 > 正文

    uni-app开发:多页面传值的方法二(返回方法传值)

    作者:admin来源:网络浏览:时间:2020-10-06 11:21:20我要评论
    导读:顾名思义,就是利用uni-app的getCurrentPages来获取当前页面与上一页面的信息,通过修改上一页面信息后返回的方法来实现,具体操作逻辑如下...

    顾名思义,就是利用uni-app的getCurrentPages来获取当前页面与上一页面的信息,通过修改上一页面信息后返回的方法来实现,具体操作逻辑如下:

    主页面:用onshow事件执行初始化事件,进行页面刷新,跳转到子页面时用uni.navigateTo方法

    子页面:提交事件里将数据转为json格式,通过getCurrentPages获取到上一级页面的内容进行修改,跳转回主页面时用uni.navigateBack方法

    案例:

    主页面:

    1. <template> 
    2.     <view> 
    3.         <h1>opition.id</h1> 
    4.         <view @tap="totextfun">前往子页面</view> 
    5.     </view> 
    6. </template> 
    7.   
    8. <script> 
    9.     export default { 
    10.         data() { 
    11.             return { 
    12.                 opition:{ 
    13.                       
    14.                 } 
    15.             } 
    16.         }, 
    17.         onShow(){ 
    18.             //页面跳转回来要执行的事件
    19.         }, 
    20.         methods: { 
    21.             //跳转到子页面
    22.             totextfun(){ 
    23.                 uni.navigateTo({ url: '/pages/text/text1'}); 
    24.             } 
    25.         } 
    26.     } 
    27. </script> 
    28.   
    29. <style> 
    30.   
    31. </style> 

    子页面:
     

    1. <template> 
    2.     <view> 
    3.         <view @tap="totextfun">跳转回主页面</view> 
    4.     </view> 
    5. </template> 
    6.   
    7. <script> 
    8.     export default { 
    9.         data() { 
    10.             return { 
    11.                   
    12.             } 
    13.         }, 
    14.         methods: { 
    15.             //跳转回主页面事件
    16.             totextfun(){ 
    17.                 var pages = getCurrentPages();//当前页
    18.                 var beforePage = pages[pages.length - 2]; 
    19.                 var json = { 
    20.                     id:11 
    21.                 }; 
    22.                 if(beforePage !=undefined){ 
    23.                     if(beforePage.opition){//判断是否为小程序,小程序的数据都在data里
    24.                         beforePage.opition = json; 
    25.                     }else
    26.                         beforePage.data.opition = json; 
    27.                     } 
    28.                 } 
    29.                 uni.navigateBack(); 
    30.             } 
    31.         } 
    32.     } 
    33. </script> 
    34.   
    35. <style> 
    36.   
    37. </style> 

    优缺点:优点是逻辑走通了,功能实现了,而且数据很安全的被传回去了,但缺点也是有的,就是如果在子页面刷新呢,因为获取不到上一级页面,代码会报错(也可以多加个判断来进行处理),但是已经没有返回上一个页面带传值的功能了。

    总结:这种方法虽然有缺点,但的确很实用,排除掉页面刷新的情况,简直无懈可击,而且页面刷新的的情况也可以直接调回首页来处理,毕竟你都在子页面刷新了,主页面的东西肯定会没掉,逻辑上已经走不通了。

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-146-6355-1.html
    相关热词搜索: uni-app页面传值