快捷導(dǎo)航

Uni-app返回上一頁面并攜帶參數(shù)的實(shí)現(xiàn)方法

更新時(shí)間：2023年06月09日 10:41:31 作者：Wjhsmart

這篇文章主要介紹了Uni-app返回上一頁面并攜帶參數(shù)的實(shí)現(xiàn)方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、前言

需要實(shí)現(xiàn)這么一個(gè)需求：在一個(gè)列表頁面，當(dāng)子頁面直接返回時(shí)，不刷新列表頁面。但是當(dāng)子頁面的數(shù)據(jù)有變動(dòng)時(shí)，需要刷新列表頁面。本篇博客記錄一下我是如何解決這個(gè)問題的。

解決思路：在onShow()方法內(nèi)監(jiān)聽返回?cái)?shù)據(jù)，當(dāng)是需要當(dāng)前頁面刷新時(shí)，在子頁面設(shè)置一個(gè)標(biāo)識符，當(dāng)監(jiān)聽到這個(gè)標(biāo)識符，就調(diào)用接口刷新數(shù)據(jù)。

在使用過程中遇到了些小坑，小白建議看完全部的內(nèi)容再選適合自己的方法解決，不要盲目copy代碼。

二、實(shí)現(xiàn)方法

1、第一個(gè)頁面 one.vue ,在onShow()方法內(nèi)監(jiān)聽返回的參數(shù)，返回的參數(shù)在上一級頁面定義的變量叫‘isRefresh’；

<template>
	<view>
		<navigator hover-class="none" url="/pages/two/two">跳到第二個(gè)頁面</navigator>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		onShow() {
			let that = this
			uni.$on('isRefresh',function(data){
				console.log('監(jiān)聽到事件來自返回的參數(shù)：' + data);
                // TODO 下面執(zhí)行刷新的方法
			})
		},
		methods: {
		}
	}
</script>
<style>
</style>

2、第二個(gè)頁面 two.vue，返回one.vue頁面，要傳遞的參數(shù)是index:1

<template>
	<view>
		<button @click="goBack">點(diǎn)擊返回上一頁</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				index:1,//返回上一頁要穿的參數(shù)
			}
		},
		methods: {
			goBack() {
				uni.$emit('isRefresh', this.index)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>
<style>
</style>

三、遇到的坑

當(dāng)?shù)谝淮畏祷亓斜眄撁鏁r(shí)，沒有問題。第二次返回時(shí)，會(huì)監(jiān)聽兩次，第三次會(huì)監(jiān)聽三次，依次類推。查詢uni.$emit相關(guān)資料后發(fā)現(xiàn)，這個(gè)是個(gè)全局的通訊事件。自 HBuilderX 2.0.0 起支持 uni.$emit、 uni.$on 、 uni.$once 、uni.$off ，可以方便的進(jìn)行頁面的通訊，觸發(fā)的事件都是 App 全局級別的，跨任意組件，頁面，nvue，vue 等。事件詳情

調(diào)用事件后要記得移除事件，或者直接使用 uni.$once 只調(diào)用一次，用完會(huì)自動(dòng)移除事件。

四、事件詳解

含義

1.uni.$emit(eventName,OBJECT)：監(jiān)聽全局的自定義事件，事件由uni.emit 觸發(fā)，回調(diào)函數(shù)會(huì)接收事件觸發(fā)函數(shù)的傳入?yún)?shù)。

其中eventName為事件名，OBJECT為觸發(fā)事件附加參數(shù)
示例代碼如下：

uni.$emit('update',{msg:'頁面更新'})

2.uni.$on(eventName,callback)：監(jiān)聽全局自定義事件，事件由uni.$emit()觸發(fā)，回調(diào)函數(shù)會(huì)接收所有傳入的數(shù)。
eventName為事件名，callback為事件的回調(diào)函數(shù)。
示例代碼如下：

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

3.uni.$once：監(jiān)聽全局的自定義事件，事件由uni.emit 觸發(fā)，但僅觸發(fā)一次，在第一次觸發(fā)之后移除該監(jiān)聽器。不需要手動(dòng)移除監(jiān)聽。

4.uni.$off：移除全局自定義事件監(jiān)聽器。

因此，本次案例只需要使用 uni.$once 即可滿足需求，將 uni.$on 改成 uni.$once

<template>
	<view>
		<navigator hover-class="none" url="/pages/two/two">跳到第二個(gè)頁面</navigator>
	</view>
</template>
<script>
	export default {
		data() {
			return {
			}
		},
		onShow() {
			let that = this
			uni.$once('isRefresh',function(data){
				console.log('監(jiān)聽到事件來自返回的參數(shù)：' + data);
                // TODO 下面執(zhí)行刷新的方法
			})
		},
		methods: {
		}
	}
</script>
<style>
</style>

Tips

如果uni.$off沒有傳入?yún)?shù)，則移除App級別的所有事件監(jiān)聽器；
如果只提供了事件名（eventName），則移除該事件名對應(yīng)的所有監(jiān)聽器；
如果同時(shí)提供了事件與回調(diào)，則只移除這個(gè)事件回調(diào)的監(jiān)聽器；
提供的回調(diào)必須跟$on的回調(diào)為同一個(gè)才能移除這個(gè)回調(diào)的監(jiān)聽器；

示例：

    <template>
        <view class="content">
            <view class="data">
                <text>{{val}}</text>
            </view>
            <button type="primary" @click="comunicationOff">結(jié)束監(jiān)聽</button>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    val: 0
                }
            },
            onLoad() {
                setInterval(()=>{
                    uni.$emit('add', {
                        data: 2
                    })
                },1000)
                uni.$on('add', this.add)
            },
            methods: {
                comunicationOff() {
                  	// 因傳入了回調(diào)函數(shù)，只會(huì)移除本頁面此回調(diào)函數(shù)的監(jiān)聽
                    uni.$off('add', this.add)
                },
                add(e) {
                    this.val += e.data
                }
            }
        }
    </script>
    <style>
        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .data {
            text-align: center;
            line-height: 40px;
            margin-top: 40px;
        }
        button {
            width: 200px;
            margin: 20px 0;
        }
    </style>

到此這篇關(guān)于Uni-app返回上一頁面并攜帶參數(shù)的文章就介紹到這了,更多相關(guān)Uni-app返回上一頁攜帶參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: