小程序底部导航，引入页面组件

一.最简单的底部导航
在全局配置 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;
}