小程序 · 底部导航Tabbar

自带的底部导航

在 app.json 中添加 ， 所有小程序的页面都会显示出来

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

list：
pagePath : 页面路径 （注意：在list中有的路径指向的页面，如果你想添加一个navigator也跳转到这个页面，那么跳转方式ope-type只能用switchTab !!）
text : icon下面显示的文字
自定义tabBar（修改tabBar的整体样式，如改变tabBar的颜色等）

参考
tabBar

自定义 tabBar（文档里的）

与 tabBar 样式相关的接口，如 wx.setTabBarItem 等将失效。

1. 配置信息
   在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
   所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

{
  "tabBar": {
    "custom": true,
    "color": "#333333",
    "selectedColor": "#3875C6",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "assets/home/icon-1.png",
        "selectedIconPath": "assets/home/icon-1-1.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/guide/index",
        "iconPath": "assets/home/icon-2.png",
        "selectedIconPath": "assets/home/icon-2-1.png",
        "text": "办事"
      },
      {
        "pagePath": "pages/address-list/index",
        "iconPath": "assets/home/icon-3.png",
        "selectedIconPath": "assets/home/icon-3-1.png",
        "text": "通讯录"
      },
      {
        "pagePath": "pages/huimin/index",
        "iconPath": "assets/home/icon-4.png",
        "selectedIconPath": "assets/home/icon-4-1.png",
        "text": "惠民"
      },
      {
        "pagePath": "pages/mySelf/mySelf",
        "iconPath": "assets/home/icon-5.png",
        "selectedIconPath": "assets/home/icon-5-1.png",
        "text": "我的"
      }
    ]
  },
  "usingComponents": {}
}

2. 添加 tabBar 代码文件
   在代码根目录下添加入口文件:
   

custom-tab-bar/index.js

const app = getApp()
const request = require('../api/request.js')

Component({
  data: {
    selected: 0,
    color: '#333333',
    selectedColor: '#3875C6',
    list: [
      {
        pagePath: '/pages/home/home',
        iconPath: '/assets/home/icon-1.png',
        selectedIconPath: '/assets/home/icon-1-1.png',
        text: '首页',
      },
      {
        pagePath: '/pages/guide/index',
        iconPath: '/assets/home/icon-2.png',
        selectedIconPath: '/assets/home/icon-2-1.png',
        text: '办事',
      },
      {
        pagePath: '/pages/address-list/index',
        iconPath: '/assets/home/icon-3.png',
        selectedIconPath: '/assets/home/icon-3-1.png',
        text: '通讯录',
      },
      {
        pagePath: '/pages/huimin/index',
        iconPath: '/assets/home/icon-4.png',
        selectedIconPath: '/assets/home/icon-4-1.png',
        text: '惠民',
      },
      {
        pagePath: '/pages/mySelf/mySelf',
        iconPath: '/assets/home/icon-5.png',
        selectedIconPath: '/assets/home/icon-5-1.png',
        text: '我的',
      },
    ],
  },
  attached() {},
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      let that = this
      if (data.index == 4 && (!app.globalData.userInfo.curgrid || !app.globalData.userInfo.curgrid.username || !app.globalData.userInfo.curgrid.avatar)) {
        if (this.data.selected == 4) {
          wx.switchTab({ url })
          that.setData({
            selected: data.index,
          })
          return false
        }
        wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            app.globalData.userProfile = res.userInfo
          },
          complete: () => {
            that.getAuth()
            wx.switchTab({ url })
            that.setData({
              selected: data.index,
            })
          },
        })
      } else {
        wx.switchTab({ url })
        this.setData({
          selected: data.index,
        })
      }
    },
    // 授权信息记录
    getAuth() {
      let params = {
        type: 'userinfo',
        name: app.globalData.userProfile.nickName,
        avatar: app.globalData.userProfile.avatarUrl,
        // mobile:this.data.,
        // location:,
        id: app.globalData.userInfo.curgrid && app.globalData.userInfo.curgrid.id ? app.globalData.userInfo.curgrid.id : '',
      }
      request
        .post('wxapp/auth', params, {})
        .then((res) => {})
        .catch((e) => {
          wx.showToast({
            title: e.explanation,
            icon: 'none',
          })
        })
    },
  },
})

custom-tab-bar/index.json

{
  "component": true
}

custom-tab-bar/index.wxml

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

custom-tab-bar/index.wxss

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 36rpx;
  height: 36rpx;
}

.tab-bar-item cover-view {
  margin-top: 10rpx;
  font-size: 20rpx;
}

3. 编写 tabBar 代码

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例。

小程序tabbar，在路由跳转时，会恢复初始激活状态，所以必须在跳转的页面里加上这样一段代码

home.js

  onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0, // 将tabbar的值重新设为当前页面需要激活的值
      })
    }
  },

参考：
自定义 tabBar
weui/tabbar

自定义底部导航组件

前面最简单的底部导航有很多情况下不能使用，比如：想要使用svg和字体图标 ，比如想要的底部菜单栏个数多于5个（一般情况下小于等于5个 ，我说的是有两个端入口的情况，比如教师端和学生端）
自定义导航有两种方式：将导航作为组件 和 将页面作为组件

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

（2）将页面作为组件
缺点：暂时还不知道

大致原理就是在主页面上写底部菜单代码，通过绑定这些菜单按钮来更改当前页面
主页面代码如下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"
  }
}

参考
自定义组件