小程序参数页面回显的几种方式

原创
2018/09/04 10:46
阅读数 2.5K

记录几种小程序A页面跳转B页面选择数据后回显到A页面的几种方式

1 通过直接操作A页面回显

该方式需要A页面和B页面均需要数据名称自己对应,命名相同防止对应错误

在A页面中定义好data如下

data: {
    applicantData : {
		name:'',
		phone:''
	}//申请人信息
},

在B页面中触发回显的方法里

data:{
    applicantData : {
		name:'',
		phone:''
	}//申请人信息
},

onSave:function(){
	var pages = getCurrentPages();//获取小程序页面堆栈
	var currPage = pages[pages.length - 1]; //当前页面
	var prevPage = pages[pages.length - 2]; //上一个页面
	//直接调用上一个页面的setData()方法,把数据存到上一个页面中去
	console.log(JSON.stringify(this.data.applicantData));
	//wx.setStorageSync("applicantData", this.data.applicantData);
	prevPage.data.applicantData = this.data.applicantData;
	prevPage.setData({ applicantData: prevPage.data.applicantData});    
	wx.navigateBack({});
}

最后在页面中绑定显示applicantData的数据即可

2 通过生命周期方法onShow实现

该方式通过在A页面 onShow 方法中,获取缓存中的数据,B页面中添加缓存数据实现

A页面相关代码

onShow: function (){
	if (this.data.applicantData.name){
		var applicantData = wx.getStorageSync("applicantData");
		this.setData({
			applicantData: applicantData
		})
	}
},

B页面中设置缓存即可

onSave:function(){
	console.log(JSON.stringify(this.data.applicantData));
	wx.setStorageSync("applicantData", this.data.applicantData);
	wx.navigateBack({});
}

最后在页面中绑定显示applicantData的数据即可

总结: 以上两方式,第二种比较方便推荐使用

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部