— 自定义导航
1.自定义导航就是自己写页面,在当前页面去写导航栏
<!-- 自定义导航位置 -->
<!-- 页面需要的自定义导航 -->
<!-- 页面 -->
<!-- 货主 -->
<view v-if="onStatus == 1">
<home v-if="index === 0" />
<news v-if="index === 1" />
<order v-if="index === 2" />
<unit v-if="index === 3" />
<!-- 底部导航 -->
<foo-bar @toIndex="toIndex" :doIndex="doIndex"></foo-bar>
</view>
<!-- 司机 -->
<view v-if=" onStatus == 2">
<driver-home v-if="index === 0"></driver-home>
<news v-if="index === 1"></news>
<driver-order v-if="index === 2"></driver-order>
<driver-unit v-if="index === 3"></driver-unit>
<foo-bar @toIndex="toIndex" :doIndex="doIndex"></foo-bar>
</view>
<!-- 运作员 -->
<view v-if=" onStatus == 3">
<operations-home v-if="index === 0"></operations-home>
<operations-order v-if="index === 1"></operations-order>
<operations-transport v-if="index === 2"></operations-transport>
<news v-if="index === 3"></news>
<driver-unit v-if="index === 4"></driver-unit>
<foo-dar @toIndex="toIndex" :home="index" :doIndex="doIndex"></foo-dar>
</view>
就像这种多个app合成一个,他们的导航不一样,又要兼容多个app,要根据不同的角色展示相应的app
— 原生导航
1、原生导航就是uni-app自带的导航,可以省很多的步骤,原生导航也是可以进行自定修改
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件"
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}]
}
这只适合开发一个app,单一的功能,不用根据登录的角色区分不同的功能
uni-app使用自定义导航好还是原生导航好
1、根据项目需求自己来定义,如果是写一个app,最好是原生导航
2、当你项目需要是多元化,一个app 根据登录账号角色不同展示不同的,也可以理解为相当于多个app合成一个app,但是多个app下面的底部导航个数和名字,图标都不一样,这样的只能用自定义导航,原生导航没有办法兼容多元化