快捷導(dǎo)航

uniapp頁(yè)面?zhèn)鲄⒌娜N方式實(shí)例總結(jié)

更新時(shí)間：2022年11月24日 15:28:04 作者：隔壁家的帥小姐

在進(jìn)行頁(yè)面的跳轉(zhuǎn)的時(shí)候,往往需要我們將一些參數(shù)攜帶著傳遞過(guò)去這里的class樣式,下面這篇文章主要給大家介紹了關(guān)于uniapp頁(yè)面?zhèn)鲄⒌娜N方式,需要的朋友可以參考下

一，uni.$emit(eventName,OBJECT)

觸發(fā)全局的自定義事件，附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)回調(diào)。

eventName為事件名，object為觸發(fā)事件附加參數(shù)。

代碼如下：

uni.$emit('gotoNext',{msg:'刷新頁(yè)面'})

二， uni.$on(eventName,Callback)

監(jiān)聽(tīng)全局自定義事件，事件由uni.$emit()觸發(fā)，回調(diào)函數(shù)會(huì)接收所有傳入的數(shù)。

eventName為事件名，Callback為回調(diào)函數(shù)。

代碼如下：

uni.$on('goto',function(data){console.log('監(jiān)聽(tīng)到事件來(lái)自goto,所帶參數(shù)msg 為：' +data.msg)})

作用：

開(kāi)發(fā)中對(duì)觸發(fā)頁(yè)面動(dòng)態(tài)更新將非常又效果。

比如說(shuō)移動(dòng)項(xiàng)目通過(guò)自己編寫(xiě)的組件（tabbar）進(jìn)行tabar跳轉(zhuǎn)，這個(gè)時(shí)候要是某應(yīng)該頁(yè)面微信支付成功了，需要返回tabbar頁(yè)面，你會(huì)發(fā)現(xiàn)，它不會(huì)像其他普通的uni頁(yè)面，（onshow生命周期）會(huì)動(dòng)態(tài)刷新，影響用戶(hù)體驗(yàn)。所以這個(gè)方法很有效，只需要在組件中寫(xiě)入uni.emit(update.masq:'頁(yè)面刷新')然后在頁(yè)面使用uni.on('update',function(data){ console.log('監(jiān)聽(tīng)到事件來(lái)自 update ，攜帶參數(shù) msg 為：' + data.msg); })接收，將函數(shù)寫(xiě)入即可。實(shí)際應(yīng)用例子如下：

onShow() {
switch (this.Tab){
case 'demo':
uni.$emit('goto',{msg:'頁(yè)面更新'});
break;
}
 
},

text頁(yè)面

created() {
uni.$on('goto', (res) => {
this.list()
console.log(res, '更新');
})
},

三，uni.$off([eventName, callback])移除全局自定義事件監(jiān)聽(tīng)器。

針對(duì)于頁(yè)面?zhèn)鲄⒄?qǐng)直接使用Vue的全局變量更方便，因?yàn)閡ni-app框架的uni.$emit()和$on() 雖然使用了定時(shí)器能接收到參數(shù)，但是不知道為什么第一次總是接收不到導(dǎo)致很多為！但是使用Vue的全局變量能搞定一切！

最后一個(gè)小舉例：

//從A跳轉(zhuǎn)B頁(yè)面，B頁(yè)面返回A頁(yè)面時(shí)傳參
//B頁(yè)面
uni.$emit("targetEvent",{shiftOverId:that.shiftOverId,productOrderId:that.productOrderId })
uni.navigateBack();
 
//A頁(yè)面
onLoad: function (e) {
	uni.$on("targetEvent",(e)=>{
		 this.preId =  JSON.parse(e.shiftOverId)
		 this.productOrderId = JSON.parse(e.productOrderId)
		 uni.$off('targetEvent')
	})
},