uniapp melompat ke halaman bar tab

Dalam uniapp, kami boleh menggunakan halaman tabBar untuk melaksanakan fungsi bar menu bawah yang serupa dengan WeChat, Alipay dan apl lain. Pada masa yang sama, kami juga boleh melaksanakan fungsi lompat subhalaman dalam halaman tabBar.

Dalam sesetengah senario, kita mungkin perlu melompat ke subhalaman tertentu dalam halaman tabBar pada komponen atau halaman lain. Artikel ini menerangkan cara untuk mencapainya.

Dapatkan contoh halaman tabBar

Mula-mula, kita perlu mendapatkan contoh halaman tabBar dalam komponen atau halaman yang perlu dilompat. Kita boleh menggunakan kaedah uni.getRealPath() untuk mendapatkan laluan sebenar halaman semasa, dan kemudian menggunakan uni.switchTab() untuk melompat.

Berikut ialah contoh kod:

// 获取当前页面实例
let pages = getCurrentPages()
let curPage = pages[pages.length - 1]

// 获取 tabBar 页面路径
let tabBarPath = '/pages/tabBar/tabBar'

// 获取 tabBar 页面实例
let tabBarPage = uni.getRealPath({
  url: tabBarPath
}).route

// 跳转到 tabBar 页面
uni.switchTab({
  url: tabBarPath,
  success() {
    // 获取 tabBar 页面实例
    let tabBarInstance = uni.$app.$children.filter(item => item.$options.name === 'uni-tab-bar')[0]

    // 设置选中的 tabBar 页面
    tabBarInstance.setActive(curPage.route)
    
    // 跳转到指定子页面
    uni.navigateTo({
      url: '/pages/subPage1/subPage1',
    })
  }
})

Antaranya, kaedah getCurrentPages() boleh mendapatkan contoh tindanan halaman semasa. Kami mendapat contoh halaman semasa melalui pages.length - 1.

Kemudian, kami menggunakan kaedah uni.getRealPath() untuk mendapatkan laluan halaman tabBar dan menetapkannya kepada pembolehubah tabBarPath. Gunakan kaedah uni.switchTab() untuk melompat ke halaman Bar tab.

Selepas lompatan berjaya, kami memperoleh contoh halaman tabBar melalui uni.$app.$children dan memanggil kaedah setActive() untuk menetapkan halaman tabBar yang dipilih pada masa ini.

Akhir sekali, kita boleh menggunakan kaedah uni.navigateTo() untuk melompat ke subhalaman halaman tabBar, seperti halaman subHalaman1 dalam contoh di atas.

Dapatkan contoh subhalaman

Kita boleh mendapatkan contohnya melalui penghalaan subhalaman dalam halaman Bar tab.

Berikut ialah kod sampel:

// 获取当前 tabBar 页面实例
let tabBarInstance = uni.$app.$children.filter(item => item.$options.name === 'uni-tab-bar')[0]
// 获取当前选中的子页面实例
let activePageInstance = uni.$app.$children.filter(item => item.$options.name === 'uni-nav-page')[tabBarInstance.activeIndex]

Dalam contoh ini, kami memperoleh tika halaman tabBar melalui penapisan dan memperoleh tika subhalaman yang dipilih pada masa ini. Kami boleh melaksanakan operasi lompat halaman berdasarkan mendapatkan contoh subhalaman.

Kesimpulan

Dengan mendapatkan contoh halaman tabBar dan contoh sub-halaman, kita boleh melompat ke sub-halaman tertentu halaman tabBar dalam mana-mana komponen atau halaman. Sila ambil perhatian bahawa selepas melompat ke halaman tabBar, kita perlu menggunakan kaedah setActive() untuk menetapkan subhalaman yang dipilih pada masa ini.

Atas ialah kandungan terperinci uniapp melompat ke halaman bar tab. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!