2020-11-15 个人总结

# uni-app 实现navigateBack返回修改前一页面数据(H5、APP、小程序)

从A页面跳到B页面,在从B页面返回跳到A页面,改变A页面的值。

//A页面
<template>
    <view class="title">返回修改的值:{{title}}</view>
</template>
export default {
    data() {
        return {
            title: 'change'
        }
    },
}

//B页面
<button @click="changeAPage">修改上一页的title值</button>
  • 1、方法一: 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
    }
},
//A页面, onShow中添加监听一个handleFun的事件
onShow(){
    uni.$on("handleChange", res => {
        this.title = res.title;
        // 清除监听
        uni.$off('handleFun');
    })
},

//B页面, 返回A页面触发一个事件,使用uni.$emit("handleChange",{})
getAddress(){
    uni.$emit("handleChange",{ title: 'Hello World' });
    uni.navigateBack()
}
  • 方法3:缓存值的方式。
    用uniapp里面的存储方法,跳页面之前吧值给存起来。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容