一.最简单的底部导航

在全局配置 app.json 中添加 ， 所有小程序的页面都会显示出来
示例：

{
  ......
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath":"",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath":"",
        "text": "日志"
      }
    ]
  },
 ......

二 . 自定义底部导航

前面最简单的底部导航有很多情况下不能使用，比如：想要使用svg和字体图标 ，比如想要的底部菜单栏个数多于5个（一般情况下小于等于5个 ，我说的是有两个端入口的情况，比如教师端和学生端）
自定义导航有两种方式：将导航作为组件 和 将页面作为组件
还不会自定义组件的小伙伴看这里：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

（1）将导航作为组件

缺点 ：会导致页面第一次进入的时候切换会导致有页面闪烁，这个闪烁其实就是url跳转。
这里代码就不放了，因为这个缺点实在是我无法容忍的，大家有需要的话，可以去查“自定义tabBar”,总会找到的。

（2）将页面作为组件

缺点：暂时还不知道
效果如下：

 
aa.gif

大致原理就是在主页面上写底部菜单代码，通过绑定这些菜单按钮来更改当前页面
主页面代码如下index.wxml

<!-- 底部切换菜单 -->
<view class="tab-bar">
  <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="index">
    <view class="tab-item {{index==nowIndex?\'active\':\'\'}}" bindtap="{{item.tapFunction}}">
        <view class="{{item.iconClass}} icons"></view>
        <text class="icon-text">{{item.text}}</text>
    </view>
  </block>
</view>
<!-- 页面容器 -->
<view class="container">
  <firstPage wx:if="{{nowPage==\'firstPage\'}}"></firstPage>
  <secondPage wx:if="{{nowPage==\'secondPage\'}}"></secondPage>
</view>

index.js

const app = getApp()

Page({
  data: {
    nowPage:"firstPage",
    nowIndex:0,
    tabBar:[
      {
        "iconClass":"iconfont icon-shouye",
        "text":"第一页",
        "tapFunction":"toFirst",
        "active":"active"
      },
      {
        "iconClass":"iconfont icon-wode",
        "text":"第二页",
        "tapFunction": "toSecond",
        "active": ""
      }
    ]
  },
  onLoad: function () {
    
  },
  toFirst(){
    this.setData({
      nowPage:"firstPage",
      nowIndex: 0
    })
  },
  toSecond() {
    this.setData({
      nowPage: "secondPage",
      nowIndex: 1
    })
  }
})

引入组件的index.json

{
  "usingComponents":{
    "firstPage":"/component/component-firstPage/component-firstPage",
    "secondPage":"/component/component-secondPage/component-secondPage"
  }
}

具体代码请在我的github上查看——https://github.com/BigJJing/wechat-tabBar_component/tree/master

作者：方_糖
链接：https://www.jianshu.com/p/9c1d60a29048
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

版权声明：本文为aademeng原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/aademeng/articles/12527066.html