uni-app常用的幾種頁(yè)面跳轉(zhuǎn)方式總結(jié)
一、uni.navigateTo(OBJECT)
保留當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面,使用uni.navigateBack
可以返回到原頁(yè)面
uni.navigateTo(OBJECT) | uni-app官網(wǎng) (dcloud.io)
methods: { //gonavigate()為點(diǎn)擊響應(yīng)事件,可在HTML部分設(shè)置 @tap="gonavigate()" gonavigate(){ uni.navigateTo({ //保留當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面 url: '/pages/detail/detail' }) } }
二、uni.navigateBack(OBJECT)
關(guān)閉當(dāng)前頁(yè)面,返回上一頁(yè)面或多級(jí)頁(yè)面??赏ㄟ^(guò) getCurrentPages()
獲取當(dāng)前的頁(yè)面棧,決定需要返回幾層。
uni.navigateTo(OBJECT) | uni-app官網(wǎng) (dcloud.io)
?methods: { //goBack()為點(diǎn)擊響應(yīng)事件,可在HTML部分設(shè)置 @tap="goBack()" goBack(){ uni.navigateBack({ //關(guān)閉當(dāng)前頁(yè)面,返回上一頁(yè)面或多級(jí)頁(yè)面。 delta:1 }); } }
三、uni.redirectTo(OBJECT)
關(guān)閉當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。
uni.navigateTo(OBJECT) | uni-app官網(wǎng) (dcloud.io)
?methods: { //goregirect()為點(diǎn)擊響應(yīng)事件,可在HTML部分設(shè)置 @tap="goregirect()" goregirect(){ uni.redirectTo({ //關(guān)閉當(dāng)前頁(yè)面,跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。 url:'/pages/about/about' }); } }
四、uni.switchTab(BOJECT)
跳轉(zhuǎn)到 tabBar 頁(yè)面,并關(guān)閉其他所有非 tabBar 頁(yè)面。
uni.navigateTo(OBJECT) | uni-app官網(wǎng) (dcloud.io)
methods: { checklogin(){ uni.request({ url: 'http://localhost:8081/api/user/login', data: { email: this.emailone, password: this.password, }, success: (res) => { //登錄成功 if (res.data.success == true) { uni.showToast({ title: '登錄成功', //顯示的文字 icon: 'success' //顯示的圖標(biāo) }); //跳轉(zhuǎn)到 tabBar 頁(yè)面,并關(guān)閉其他所有非 tabBar 頁(yè)面。 uni.switchTab({ url: '../tabbor/index/index' }); } else { uni.showToast({ title: '用戶名或密碼錯(cuò)誤', //顯示的文字 icon: 'none' //顯示的圖標(biāo) }); } } }) } }
五、openURL
調(diào)用第三方程序打開(kāi)指定的URL
HTML5+ API Reference (html5plus.org)
?methods: { //goopenurl()為點(diǎn)擊響應(yīng)事件,可在HTML部分設(shè)置 @tap="goopenurl()" goopenurl(){ boid plus.runtime.openURL('https://www.baidu.com/') } }
補(bǔ)充:傳值與接收
通過(guò)跳轉(zhuǎn)傳值一般套路就是在URL中把需要傳的值帶過(guò)去,然后再接收的頁(yè)面onLoad函數(shù)中,利用參數(shù)接回來(lái)。
跳轉(zhuǎn)頁(yè)面:
uni.navigateTo({ url:'頁(yè)面路徑?id=1' })
接收頁(yè)面:
onLoad: function (option) { //option為object類型,會(huì)序列化上個(gè)頁(yè)面?zhèn)鬟f的參數(shù) console.log(option.id); //打印出上個(gè)頁(yè)面?zhèn)鬟f的參數(shù)。傳遞的是id=1,則獲取到的就是option.id }
總結(jié)
到此這篇關(guān)于uni-app常用的幾種頁(yè)面跳轉(zhuǎn)方式的文章就介紹到這了,更多相關(guān)uni-app頁(yè)面跳轉(zhuǎn)方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
原生javascript的ajax請(qǐng)求及后臺(tái)PHP響應(yīng)操作示例
這篇文章主要介紹了原生javascript的ajax請(qǐng)求及后臺(tái)PHP響應(yīng)操作,結(jié)合示例形式分析了JavaScript前臺(tái)ajax請(qǐng)求的原理、調(diào)用、后臺(tái)PHP響應(yīng)請(qǐng)求及cookie保存相關(guān)操作技巧,需要的朋友可以參考下2020-02-02jquery根據(jù)錨點(diǎn)offset值實(shí)現(xiàn)動(dòng)畫切換
點(diǎn)擊后僵硬的切換是不是很不爽,下面為大家介紹的是根據(jù)錨點(diǎn)offset值來(lái)實(shí)現(xiàn)動(dòng)畫切換,喜歡的朋友不要錯(cuò)過(guò)2014-09-09微信小程序使用map組件實(shí)現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能
這篇文章主要介紹了微信小程序使用map組件實(shí)現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能,涉及微信小程序map組件結(jié)合微信API獲取天氣信息相關(guān)操作技巧,需要的朋友可以參考下2019-01-01Google AJAX 搜索 API實(shí)現(xiàn)代碼
Google AJAX 搜索 API實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-11-11Bootstrap樹(shù)形組件jqTree的簡(jiǎn)單封裝
這篇文章主要介紹了Bootstrap樹(shù)形組件jqTree的簡(jiǎn)單封裝,封裝一個(gè)稍微完整點(diǎn)的樹(shù)形組件,感興趣的小伙伴們可以參考一下2016-01-01