uniapp页面传值
一、传递单个或者多个参数商品列表页:// 商品列表页传递id 跳转到相应的商品详情页面getGoodsDetails(id){uni.navigateTo({url: `getGoodsDetails?id=${id}`});}//注:如果需要传递多个参数使用&符号连接即可,示例:getGoodsDetails(id, item){uni.navigateTo({url: `getGood
·
一、传递单个或者多个参数
商品列表页:
// 商品列表页传递id 跳转到相应的商品详情页面
getGoodsDetails(id){
uni.navigateTo({
url: `getGoodsDetails?id=${id}`
});
}
// 注:如果需要传递多个参数使用&符号连接即可,示例:
getGoodsDetails(id, item){
uni.navigateTo({
url: `getGoodsDetails?id=${id}&item=${item}`
});
}
商品详情页面:
// 商品详情页通过 onLoad 生命周期中接传递过来的参数 id
onLoad(option){
console.log('上一个页面传递过来的参数', option)
console.log('id', option.id)
console.log('item', option.item)
// 接下来就是你需要该id做些什么,比如通过id查询到该详情等
}
二、传递数组或者对象
如需要传递的参数有很多时,由uniapp 跳转页面api 的 url 有长度限制,需使用以下方式进行数据传递:
商品列表页面:
// item 为该列表的每一项的数据对象;encodeURIComponent 为uniapp 提供的api
getGoodsDetails(item) {
uni.navigateTo({
url: `getGoodsDetails?item=${encodeURIComponent(JSON.stringify(item))}`,
});
}
商品详情页面:
// 同样onLoad 生命周期中进行接收, decodeURIComponent 为uniapp 提供的api
onLoad(option) {
const item = JSON.parse(decodeURIComponent(option.item));
console.log('上一个页面传递过来的参数对象',item );
// 接下来就是你需要该对象数据做些什么,当然这里你可以直接赋值给data绑定的数据
this.objData = item;
}
注意:传递数据的时候必须使用 JSON.stringify 将其转为 JSON 字符串,然后接收的时候也必须使用 JSON.parse 来进行解析!
操作数组也是一样的,因为数组也是对象
更多推荐
已为社区贡献12条内容
所有评论(0)