zoukankan      html  css  js  c++  java
  • uni-app 实现navigateBack返回修改前一页面数据(H5、APP、小程序)

    B页面返回修改A页面title的值

    //A页面
    <template>
        <text class="title">返回修改的值:{{title}}</text>
    </template>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
    }
    //B页面
    <button @click="change">修改上一页的title值</button>
    

    方案一: getCurrentPages()

    注:虽然都是通过getCurrentPages,但H5和APP/小程序通过getCurrentPages打印出来的前一页面的结构是不同的。

    H5
    change(e){
        var pages = getCurrentPages();
        var currPage = pages[pages.length - 1];   //当前页面
        var prevPage = pages[pages.length - 2];  //上一个页面
        //将前一页的title修改为"Hello World"
        prevPage._data.title =  'Hello World'
        //因为修改的是data里面的绑定数据,所以返回后页面数据会直接显示修改后的
        uni.navigateBack()
    }, 
    
    APP/小程序
    //B页面
    change(e){
        var pages = getCurrentPages();
        var currPage = pages[pages.length - 1];   //当前页面
        var prevPage = pages[pages.length - 2];  //上一个页面
        //console.log(prevPage ); //按照打印结构这样赋值虽然成功但页面数据不会修改
        // prevPage.data.$root[0].title = 'Hello World'
        prevPage.setData({
            title: 'Hello World'
        })
        uni.navigateBack()
    },
    //A页面,onShow方法,把setData的数据赋值到当前页面绑定的变量上
    onShow(e) {
        let pages = getCurrentPages();
        let currPage = pages[pages.length-1];
        if(currPage.data.title == undefined || currPage.data.title == ''){
    		
        }else{
            this.title = currPage.data.title
        }
    }, 
    

    方案二:$on监听

    https://uniapp.dcloud.io/api/window/communication

    //A页面, onShow中添加监听一个handleFun的事件
    onShow(){
        uni.$on("handleFun", res => {
            this.title = res.title;
            // 清除监听
            uni.$off('handleFun');
        })
    },
    
    //B页面, 返回A页面触发一个事件,使用uni.$emit("handleFun",{})
    getAddress(){
        uni.$emit("handleFun",{title: 'Hello World'});
        uni.navigateBack()
    }
    

    方案三:缓存值的方式

  • 相关阅读:
    网站常见的反爬虫和应对方法 + [评论]
    斯坦福大学自然语言处理第一课——引言(Introduction)
    爬虫入门实战,知乎小爬虫
    使用情感分析技术做营销
    字符串匹配的KMP算法
    向Array中添加希尔排序
    向Array中添加二分插入排序
    向Array中添加插入排序
    开辟我的前端之旅!
    【apache】yum 安装Apache(Centos 6.5)
  • 原文地址:https://www.cnblogs.com/vicky123/p/12856011.html
Copyright © 2011-2022 走看看