一.最简单的底部导航
在全局配置 app.json 中添加 , 所有小程序的页面都会显示出来
示例:
{
......
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"iconPath":"",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"iconPath":"",
"text": "日志"
}
]
},
pagePath : 页面路径 (注意:在list中有的路径指向的页面,如果你想添加一个navigator也跳转到这个页面,那么跳转方式ope-type只能用switchTab !!)
text : icon下面显示的文字
自定义tabBar(修改tabBar的整体样式,如改变tabBar的颜色等)请参考https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
二 . 自定义底部导航
前面最简单的底部导航有很多情况下不能使用,比如:想要使用svg和字体图标 ,比如想要的底部菜单栏个数多于5个(一般情况下小于等于5个 ,我说的是有两个端入口的情况,比如教师端和学生端)
自定义导航有两种方式:将导航作为组件 和 将页面作为组件
还不会自定义组件的小伙伴看这里:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
(1)将导航作为组件
缺点 :会导致页面第一次进入的时候切换会导致有页面闪烁,这个闪烁其实就是url跳转。
这里代码就不放了,因为这个缺点实在是我无法容忍的,大家有需要的话,可以去查“自定义tabBar”,总会找到的。
(2)将页面作为组件
1,在需要引入的wxml界面加入代码
<view class="tabbar">
<app-tab-bar></app-tab-bar>
</view>
2,json文件定义
"usingComponents": {
"app-tab-bar": "/components/basic-component/app-tab-bar/app-tab-bar"
},
"component":true,
3,样式调整,我引入的是底部导航,样式就固定在底部
.tabbar{
bottom: 0;
position: sticky;
}