微信小程序不同角色进入不同页面、呈现不同底部导航栏

Hillbox2024-12-30 9:04

遇到这个需求之前一直使用的小程序默认底部导航栏，且小程序默认入口页面为pages/index/index，要使不同角色呈现不同底部导航栏，必须要在不同页面引用不同的自定义导航栏。本篇将结合分包（subPackages）展开以下三步叙述。

一、创建不同角色的页面

1、目录中创建分包personA、personB。

2、app.json补充分包配置。

二、创建不同角色的底部导航栏

1、在conponents目录下创建personA和personB的自定义导航栏组件。

2、填充导航栏内容。

html 复制代码

<!--components/tabBarA/tabBarA.wxml-->
<view class="bottom-fixed">
    <text>A的底部导航栏</text>
</view>

/* components/tabBarA/tabBarA.wxss */
.bottom-fixed{
    width: 100%;
    height: 200rpx; 
    position: fixed;
    bottom: 0;
    background-color: antiquewhite;
}

html 复制代码

<!--components/tabBarB/tabBarB.wxml-->
<view class="bottom-fixed">
    <text>B的底部导航栏</text>
</view>

/* components/tabBarB/tabBarB.wxss */
.bottom-fixed{
    width: 100%;
    height: 200rpx;
    position: fixed;
    bottom: 0;
    background-color:azure;
}

三、完善页面内容

1、完善pages/index/index页面，控制跳转到personA或者personB的页面。

javascript 复制代码

// index.js
Page({
    onShow(option){
        wx.reLaunch({
          url: '/personA/index/index',
        //   url: '/personB/index/index',
        })
    }
})

2、完善personA的页面

html 复制代码

<!--personA/index/index.wxml-->
<text>personA的页面</text>

<tabBar></tabBar>


<!--personA/index/index.json-->
{
    "usingComponents": {
        "tabBar": "/components/tabBarA/tabBarA"
    }
}

3、完善personB的页面

html 复制代码

<!--personB/index/index.wxml-->
<text>personB的页面</text>

<tabBar></tabBar>


<!--personB/index/index.json-->
{
    "usingComponents": {
        "tabBar": "/components/tabBarB/tabBarB"
    }
}

完结。

微信小程序 不同角色进入不同页面、呈现不同底部导航栏

微信小程序不同角色进入不同页面、呈现不同底部导航栏