上海沙龙网站建设上海app网络推广公司电话

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

一、创建不同角色的页面

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

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

  

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

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

2、填充导航栏内容。 

<!--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;
}

<!--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的页面。

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

2、 完善personA的页面

<!--personA/index/index.wxml-->
<text>personA的页面</text><tabBar></tabBar><!--personA/index/index.json-->
{"usingComponents": {"tabBar": "/components/tabBarA/tabBarA"}
}

3、完善personB的页面

<!--personB/index/index.wxml-->
<text>personB的页面</text><tabBar></tabBar><!--personB/index/index.json-->
{"usingComponents": {"tabBar": "/components/tabBarB/tabBarB"}
}

 完结。