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

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

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

一，uni.$emit(eventName,OBJECT)

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

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

代碼如下：

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

二， uni.$on(eventName,Callback)

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

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

代碼如下：

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

作用：

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

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

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

text頁面

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

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

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

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

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