微信小程序路由跳轉功能實現(xiàn)
更新時間：2025年06月17日 09:57:31 作者：干到60歲退休的碼農
本文介紹了微信小程序路由跳轉方法,包括wx.switchTab實現(xiàn)底部導航欄和wx.navigateTo跳轉非底部頁面,需配置pages數(shù)組及自定義tab-bar組件,感興趣的朋友一起看看吧
路由方式
wx.switchTab
實現(xiàn)底部導航欄
1.配置信息
app.json
"tabBar": {
"custom": true,
"list": [{
"pagePath": "pages/home/index",
"text": "首頁"
},
{
"pagePath": "pages/my/index",
"text": "我的"
}
]
}2.tabBar組件
實現(xiàn)一個公共組件custom-tab-bar，在代碼根目錄下添加入口文件：
index.js
Component({
data: {
value: 'home',
list: [{
value: 'home',
label: '首頁',
icon: 'home'
},
{
value: 'my',
label: '我的',
icon: 'user'
},
],
},
lifetimes: {
ready() {
const pages = getCurrentPages();
const curPage = pages[pages.length - 1];
if (curPage) {
const nameRe = /pages\/(\w+)\/index/.exec(curPage.route);
if (nameRe === null) return;
if (nameRe[1] && nameRe) {
this.setData({
value: nameRe[1],
});
}
}
},
},
methods: {
handleChange(e) {
wx.switchTab({
url: `/pages/${e.detail.value}/index`
});
}
}
});index.json
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
"t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"
}
}index.wxml
<t-tab-bar value="{{ value }}" theme="tag" split="{{ false }}" bind:change="handleChange">
<t-tab-bar-item icon="home" value="home">首頁</t-tab-bar-item>
<t-tab-bar-item icon="user" value="my">我的</t-tab-bar-item>
</t-tab-bar>wx.navigateTo
wx.navigateTo({
url: '/pages/game/index?id=1',
})需要跳轉的頁面需要注冊在app.json的pages數(shù)組里：
"pages": [
"pages/home/index",
"pages/my/index",
"pages/game/index"
],到此這篇關于微信小程序路由跳轉功能實現(xiàn)的文章就介紹到這了,更多相關小程序路由跳轉內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了使用開源工具制作網(wǎng)頁驗證碼的方法的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細介紹了JavaScript代碼實現(xiàn)簡單計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
下面小編就為大家?guī)硪黄钊肜斫釰S addLoadEvent函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了ExpressJS使用express-ws的實例代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
JavaScript flash復制庫類 Zero Clipboard
開發(fā)中經(jīng)常會用到復制的功能，在 IE 下實現(xiàn)比較簡單。但要想做到跨瀏覽器比較困難了。2011-01-01
childNodes實現(xiàn)代碼2009-04-04
這篇文章主要介紹了JavaScript實現(xiàn)快速排序的方法,結合實例形式分析了快速排序的原理、實現(xiàn)方法及相關操作注意事項,需要的朋友可以參考下2018-01-01
這篇文章主要為大家詳細介紹了通過JS調用某段SQL語句的相關方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了Javascript中call的兩種用法實例，有需要的朋友可以參考一下2013-12-12
這篇文章主要介紹了微信小程序項目實踐之主頁tab選項實現(xiàn),本文通過實例代碼相結合的形式給大家介紹的非常詳細，需要的朋友可以參考下2018-07-07