微信小程序使用页面栈改变上一页面的数据

微信小程序中如果从一个页面中进入下一个页面,如果下个页面的数据有删除或者增加再返回上一个页面的时候,就会导致页面不刷新(数据加载函数在onload中),从而造成数据不一致的情况。其实在微信小程序中是可以实现改变上一个页面中的数据似的前后两个页面数据一致的。

一般的方法可以使用本地缓存将当前页面的数据放入,回到上级页面的时候再从缓存中读取出来,还有就是使用页面栈的。

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

以下为页面栈的使用例子:

前一页面:

Page({
     data: {
        name: ''
     },
     ...
     ,
     //更新name
     changeData: function(name){
        this.setData({
            name: name
        })
     }
})

当前页面:

Page({
    //此方法用于文本框输入回调
    inputTyping: function (e) {
        //获取页面栈
        var pages = getCurrentPages();
  		 var Page = pages[pages.length - 1];//当前页
        var info = prevPage.data //取上页data里的数据也可以修改
        if(pages.length > 1){ //说明有上一页存在
            //上一个页面实例对象
            var prePage = pages[pages.length - 2];
            //关键在这里,调用上一页的函数
            prePage.changeData(e.detail.value)
        }
    }
})

这样就可以实现数据传递给上一个页面,要注意页面上一页面必须使用wx.navigateTo()跳转到下一页面,不能使用wx.redirectTo,这样会关闭上一个页面,导致页面B无法获取上一页Page实例。

posted @ 2018-03-26 09:44  csuwujing  阅读(11163)  评论(0编辑  收藏  举报