1.开发环境 uni-app+uview
2.电脑系统 windows10专业版
3.在使用uni-app+uview开发的过程中,我们分享一下uni.navigateTo方法进行页面传值,希望对你有所帮助!若有不对的地方,请多多指教!
4.废话不多说,直接上代码,在template中添加如下代码:
提交
5.在return中添加如下代码:
return {
list: [
{
value: 1,
label: "中国",
children: [
{
value: 2,
label: "广东",
children: [
{
value: 3,
label: "深圳",
},
{
value: 4,
label: "广州",
},
],
},
{
value: 5,
label: "广西",
children: [
{
value: 6,
label: "南宁",
},
{
value: 7,
label: "桂林",
},
],
},
],
},
{
value: 8,
label: "美国",
children: [
{
value: 9,
label: "纽约",
children: [
{
value: 10,
label: "皇后街区",
},
],
},
],
},
],
chenwtdaddformObj:{
mode: "range",
show: false,
show2: false,
} ,
chenwtdaddform: {
wtdh: "",
wtpeople: "",
wtpeoplephone: "",
wtypname: "",
wtyptm: "",
bt: "",
content: "",
addresscon: "",
mode: "range",
show: false,
show2: false,
},
};6.效果图如下:
7.添加提交事件 在methods中添加如下代码:
chensubmit(){
uni.navigateTo({
url: "../../pages/entrustchenck/entrustchenck?chenwtdaddformObj="+this.chenwtdaddform,
});
}
在接受页面效果如下,这个肯定不是我们想要的结果
8.修改 提交的方法,修改 chensubmit方法 代码如下:
chensubmit(){
console.log(this.chenwtdaddform);
let chenwtdaddformObj=encodeURIComponent(JSON.stringify(this.chenwtdaddform));
uni.navigateTo({
url: "../../pages/entrustchenck/entrustchenck?chenwtdaddformObj="+chenwtdaddformObj,
});
}9.在接受的页面 也就是:entrustchenck/entrustchenck.vue 中在onLoad中添加如下代码:
onLoad(options) {
console.log("已加载就触发9999");
console.log(options.chenwtdaddformObj);
let chenoptionObj=JSON.parse(decodeURIComponent(options.chenwtdaddformObj));
console.log(chenoptionObj);
},10.接受页面,输出结果为:
11.本期的分享到了这里就结束啦,是不是很nice,希望对你有所帮助,在成长的道路上希望你不要认输,不要低头,不要放弃,让我们一起努力走向巅峰!