uni app页面传值

传值是很常见的知识点,刚开始接触uni app总会踩到很多传值的坑,不是这里传不过去,就是那边接收不到,以下是我遇到过的一些传值方式,实在不行,咱就一个一个试,总有一个能“干起”。

一、普通传值,传id等简单数据。

// 第一个页面(比如景点列表页)传递id 跳转景点详情页
JumpToDetails(id){
	uni.navigateTo({
		url: 'pages/desc/desc?id='+id
	});
}
// onLoad (生命周期函数)接一下商业页面传递过来的id 
onLoad(option){
	console.log('id', option.id)
}

二、复杂数据传值,比如字符串。

//跳转景点详情页面
jumpdesc(item) {
	console.log(item)
	uni.navigateTo({
		url: '../traveldesc/traveldesc?item=' + encodeURIComponent(JSON.stringify(item))
	});
}
// 获取上一页传递过来的id值方便匹配对应景点信息
onLoad: function(option) {
	this.item = JSON.parse(decodeURIComponent(option.item));
	console.log(this.item)
},

三、全局传递,此方式可以用于tabbar之间传值

//第一个页面
jumpTo(){
    let that = this;
	// 跳转
    uni.switchTab({
	    url: '../order/order',
	    success: () => {
		    console.log();
		    let item = that.arr;
		    // 将参数全局传递
		    getApp().globalData.paramsData = item
	    }
    })
}
//第二个页面
onShow(option) {
	console.log(333,getApp().globalData.paramsData);
	const item = getApp().globalData.paramsData;
},

四、消息传递、经过实验可以用于返回上一页和tabbar。

//第一个页面
selectcity(list) {
	uni.$emit('updateData', list);//向首页发送选择的城市数据
	uni.navigateBack({
		url: './index/index'
	});
},
//第二个页面
// 接收从上一个页面传递回来的值
onShow() {
	let that = this
	uni.$on('updateData', function(data) {
		that.city = data
    })
},

五、也可以使用local storage存储数据后,在另一个页面读出来,这个方法可以解决数据刷新后消失的问题。但是如果都使用local storage缓存数据了也可以使用vuex,不然的话就搞一个后端。在这里不做更多的描述,可以自己去搜。

如果有描述不当的地方,请各位大佬轻点喷。

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值