请问怎么样才能在小程序里边实现底部导航栏的设置啊？

效果展示

通过使用 Towify 左侧导航栏中的界面，创建一个Tabbar View 界面，然后通过自定义上传图标和设置样式，即可实现底部的菜单导航。

创建界面

点击左侧导航栏中的界面。

点击Tabbar View。

点击确认创建界面。

数据绑定

选中底部导航栏图标。

自定义文本内容。

选中底部导航栏图标。

上传 svg。

配置样式

选中图标。

点击检查面板中的样式面板。

配置图标颜色和阴影。

最近在开发中想实现一个AppBar下面有选项卡，来回切换的页面功能，百度了很多没有和自己需求符合的，网上大都是返回的Scaffold，使用系统的Appbar，添加至bottom中，但是现在项目中用的是自定义的Appbar,不想破坏系统的统一封装。

所以在body 中实现TabBar 和 TabBarView，开始使用Column一直不行，只能显示一个，但是在body里面同时放置 TabBar 和 TabBarView需要注意
TabBarView 的父 Widget 必须知道宽高才能布局，否则，会报错：BoxConstraints forces an infinite height

使用 Column + Expanded 即可：

注：还有设置tabbar的tab背景颜色，tabbar中的tab的背景颜色取的实际是AppBar的主题色，所以我们将tabbar放在Material中来重置了主题色，变成我们想要的背景色

buildTabBar为创建TabBar的方法：

buildBodyView创建视图方法：

方法一：直接在桌面上按住“Ctrl+Alt+鼠标滚轮”，即可调整图标大小，调整合适后“松开鼠标滚轮”即可。

方法二：在桌面上右击选择”查看“，选择适当的查看方式（小图标，中等图标，大图标）即可完成快速设置。

首页小程序导航栏TabBar设置

1、注意区分属性值大小写的区别，比如selectedIconPath如果写成selectediconpath则不显示。

2、如果tabBar中设置"postion":"top"则icopath的都不再显示。

3、注意{}中如果列出几项，这除最后一项外每一项结尾加逗号，最后一项不用加。

"tabBar": {

    "selectedColor": "#1296db",

    "list": [{

      "pagePath": "pages/index/index",

      "text": "首页",

      "iconPath": "images/ico-homepng",

      "selectedIconPath": "images/ico-home-dpng"

    },{

      "pagePath": "pages/setting/setting",

      "text": "设置",

      "iconPath": "images/ico-settingpng",

      "selectedIconPath": "images/ico-setting-dpng"

    },{

      "pagePath": "pages/help/help",

      "text": "帮助",

      "iconPath": "images/ico-helppng",

      "selectedIconPath": "images/ico-help-dpng"

    }]

  }

UIBarAppearance是iOS13苹果新出来的一个对相应的空间统一设置外观样式的API，可以统一配置NavigationBar 、TabBar、 Toolbar等的外观样式。

UIBarAppearance的子类

UINavigationBarAppearance 设置导航栏外观样式

UITabBarAppearance 设置Tabbar外观样式

UIToolbarAppearance 设置Toolbar外观样式

这里用导航条的UINavigationBarAppearance作为示例，TabBar和Toolbar的设置外观样式使用的方式与其相同

1 UINavigationBar 默认外观样式

iOS15以前默认是半透明毛玻璃

iOS15以后默认是透明，在滑动时如果系统检测到导航栏下方有其他UI的话，导航栏会变成半透明毛玻璃，想要默认半透明毛玻璃，设置standardAppearance和scrollEdgeAppearance，单独设置standardAppearance也不行

let navBarAppearance = UINavigationBarAppearance()

navigationBarscrollEdgeAppearance = navBarAppearance

navigationBarstandardAppearance= navBarAppearance

2 UINavigationBar相关属性说明

iOS15以前设置有效果

iOS15以后无效果需要设置UINavigationBarAppearance的backgroundColor

默认为YES，当设为YES，iOS15以前先取barTintColor的颜色，当barTintColor为nil默认半透明毛玻璃，iOS15先取UINavigationBarAppearance的backgroundColor颜色，当UINavigationBarAppearance的backgroundColor为nil，UINavigationBarAppearance的backgroundEffect默认半透明毛玻璃，当UINavigationBarAppearance的backgroundEffect为nil背景为透明

当设为NO，iOS15以前先取barTintColor的颜色，当barTintColor为nil默认白色，iOS15先取UINavigationBarAppearance的backgroundColor颜色，当UINavigationBarAppearance的backgroundColor为nil，UINavigationBarAppearance的backgroundEffect默认背景为灰色，当UINavigationBarAppearance的backgroundEffect为nil背景为黑色

iOS13以前设置有效果,不过需要同时设置backgroundImage，会影响导航栏背景，不建议

iOS13以后无效果需要设置UINavigationBarAppearance的shadowColor和shadowImage

当可滚动内容的边缘与导航栏的边缘对齐时，导航栏的外观设置。如果这个属性的值为nil, UIKit使用导航栏的standardAppearance外观属性的值，修改为有一个透明的背景

设置导航栏标准高度的样式设置，默认样式。此属性的默认值是一个包含系统默认外观设置的外观对象

3UINavigationBarAppearance相关属性说明

半透明效果，基于backgroundColor或backgroundImage的磨砂效果

背景色

背景

渲染backgroundImage时使用的内容模式。 默认为UIViewContentModeScaleToFill。

阴影颜色（底部分割线），当shadowImage为nil时，直接使用此颜色为阴影色。如果此属性为nil或clearColor（需要显式设置），则不显示阴影

阴影

  src下新建文件夹，component用于存放公共组件，page用于存放页面组件。res放一些静态资源。

  其中通过props传入子组件名字，图标 ，选中的样式、以及点击事件。也就是图下的一个小模块。

  小贴士，定义id时，最好与图标未选中时的命名一致，这样方便处理。
   - 循环过滤tabs, 根据每一项的id与current比较，选则图标和样式。
   - 将过滤的结果渲染出来
   - 子组件点击时，调用父组件的 itemNav 时间，达到切换的效果。

  在头部引入样式

首先iOS13更新了新的类 UIBarAppearance 来设置系统或者自定义的Tabbar等控件的属性：拿 UITabbar来讲，新增了standardAppearance的属性，standardAppearance属于UITabBarAppearance类，UITabBarAppearance继承自UIBarAppearance。我们如果在iOS13系统环境下想要设置Tabbar的一些属性，比如分割线颜色，就需要用下面的方法来设置：

    

// 修改tabbar顶部分割线的颜色        

需要注意的是，iOS13只有使用appearance属性才能有效显示，使用之前的老方法就无法显示，所以为了更好的适配不同系统版本，还需要添加之前的方法:

文章的目的只是做个提醒，方法没写全~

最近做项目的时候，突然来了个小特殊的需求，根据客户的类型来动态显示底部的tabBar菜单。当时我就有点小懵逼了，这个不是小程序自带的组件么？还要做成动态？这就有点尴尬了
不过也只是一时尴尬而已，然后我就展开了搜索之旅然后发现，官方的组件确实没办法做动态，那咋办，如果真的有这个需求那也是得去处理滴呀~然后也看了有一些做到这效果的方法，那就试一下呗。。其实就是自定义个tabBar的模板，以下是实现：

首先，既然是说自定义组件，那是用到template了。那先在Page里新建个template的文件夹，以便放tabBar的组件。

然后新建个tabBarwxml文件，这里就写下你的tabBar的结构。

下面是tabBar所需要用到的样式，我这里就直接写在全局appwxss了。

然后接下来是js的部分，由于是底部的导航，那肯定是不止一个页面用到的，那这里就可以写在全局的appjs里面方便使用。这里我写了两种tabBar的模板，分别对应来显示

然后在需要用到这个组件的页面上直接调用。比如这里的index页面。

然后去indexjs里面调用tabBar

然后下面是效果图。

就这些。我个人觉得这个自定义导航的用户体验不是很好，能不用就不要用，不过知道下方法也是ok滴！如有发现有错或者不足的地方可以指出，谢谢！

---