1.开发环境 uni-app+uview
2.电脑系统 windows10专业版
3.在应用uni-app+uview开发的过程中,咱们分享一下uni.navigateTo办法进行页面传值,心愿对你有所帮忙!若有不对的中央,请多多指教!
4.废话不多说,间接上代码,在template中增加如下代码:
<view class="chenwtdadd"> <u-form :model="chenwtdaddform" ref="chenwtdaddform" id="chenwtdaddform"> <u-form-item label="委托单号:" ><u-input v-model="chenwtdaddform.wtdh" /></u-form-item> <u-form-item label="委托人:" ><u-input v-model="chenwtdaddform.wtpeople" /></u-form-item> <u-form-item label="联系电话:" ><u-input v-model="chenwtdaddform.wtpeoplephone" /></u-form-item> <u-form-item label="样品名称:" ><u-input v-model="chenwtdaddform.wtypname" /></u-form-item> <u-form-item label="样品条码:" ><u-input v-model="chenwtdaddform.wtyptm" /></u-form-item> <u-form-item label="委托日期:"> <u-calendar v-model="chenwtdaddform.show" :mode="chenwtdaddform.mode" @change="change" ></u-calendar> <u-input v-model="chenwtdaddform.content" @click="chenformdate" /> </u-form-item> <u-form-item label="委托地址:"> <u-select v-model="chenwtdaddform.show2" mode="mutil-column-auto" :list="list" @confirm="confirm" ></u-select> <u-input v-model="chenwtdaddform.addresscon" @click="chenformaddress" /> </u-form-item> <u-form-item label="备注:"> <u-input v-model="chenwtdaddform.bt" /> <!-- <textarea rows="20" /> --> </u-form-item> </u-form> <view class="chensubmit"> <u-button shape="square" :ripple="true" ripple-bg-color="#909399" @click="chensubmit" >提交</u-button > </view> </view>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,心愿对你有所帮忙,在成长的路线上心愿你不要认输,不要抬头,不要放弃,让咱们一起致力走向巅峰!