uniapp页面动态传参，及接收参数


1：index.vue的页面,在按钮上绑定点击事件，将所要传递的参数放在点击事件的方法里面。

<text @click=“details(item.id)”>
2：进入methods，将参数放在方法里面，并且在url跳转路径后面进行拼接。

details(id) {
uni.navigateTo({
url: “details?id=”+id,
});
},
3：在pages里面新建一个details.vue页面，接收index.vue传过来的参数。

4：在onLoad里面打印一下接受到的参数

onLoad(option) {
console.log(option.id)
},
5：index.vue页面的参考代码
<template> <view> <view class="padding-xl" v-for="(item,index) in
fenecList.fences" :key="index"> <text @click="details(item.id)">{{item.id}} {{
item.name}}</text> </view> </view> </template> <script> export default { data()
{ return { fenecList: [], }; }, onLoad() { this.getList(); }, methods: { getList
() { uni.request({ url: "../../static/test.json", method: 'get', dataType:
'json', success: (res) => { console.log(res.data); this.fenecList = res.data.
info; }, }); }, details(id) { uni.navigateTo({ url: "details?id="+id, }); }, },
} </script> <style> </style>
details.vue参考的代码
<template> <view> </view> </template> <script> export default { data() { return
{ }; }, onLoad(option) { console.log(option.id) this.getList(option.id); },
methods: { getList(id) { uni.request({ url: "xxx", method: 'get', dataType:
'json', data: { "id":"id", }, success: (res) => { }, }); }, }, } </script> <
style> </style>

技术
下载桌面版
GitHub
Microsoft Store
SourceForge
Gitee
百度网盘（提取码：draw）
云服务器优惠
华为云优惠券
京东云优惠券
腾讯云优惠券
阿里云优惠券
Vultr优惠券
站点信息
问题反馈
邮箱：[email protected]
吐槽一下
QQ群：766591547
关注微信
©2020-2025 ioDraw All rights reserved, Privacy Policy