uniapp怎么控制tabbar的显示隐藏

控制tabbar的显示隐藏

1.常规的 tabbar

在uniapp中，使用 tabbar 模板创建的项目，可以在uni-app中实现 tabbar 管理。通过在pages.json里面配置底部导航栏，再通过在 page 根节点中添加tabbar，就可以实现 tabbar 的普通管理。但是有些时候，我们需要在特定的页面操作tabbar的显隐属性。

2.隐藏tabbar

通过在特定的页面里面添加以下代码，可以实现向用户隐藏底部tabbar：

onShow() {
  this.$parent.globalData.showTabbar = false;
},
onHide() {
  this.$parent.globalData.showTabbar = true;
},

在页面生命周期钩子函数中执行 $parent.globalData.showTabbar = false 就可以让 tabbar 隐藏。当你希望让 tabbar 再度显示时，执行 $parent.globalData.showTabbar = true。

3.显示tabbar

通过在特定的页面里面添加以下代码，可以实现向用户展示底部tabbar：

onShow() {
  this.$parent.globalData.showTabbar = true;
},
onHide() {
  this.$parent.globalData.showTabbar = false;
},

在页面生命周期钩子函数中执行 $parent.globalData.showTabbar = true 就可以让 tabbar 显示出来。当你希望让 tabbar 隐藏时，执行 $parent.globalData.showTabbar = false

4.在页面特定位置显示tabbar

有时候，我们希望在页面的特定位置显示tabbar。按照上面的方法，很容易实现 tabbar 的隐藏和显示。我们可以使用状态管理器来控制 tabbar 的显示和隐藏。

// 当页面进入/离开的时候，
onShow() {
  this.$store.commit('SET_SHOW_TABBAR', true); // 显示tabbar
},
onHide() {
  this.$store.commit('SET_SHOW_TABBAR', false); // 隐藏tabbar
},

我们在使用vuex状态管理的时候，需要将tabbar的显隐属性放到 state 中，mutations中定义控制tabbar的方法，同时在tab根目录下mounted生命周期中判断当前的路由路径，如果与底部菜单链接的路径相同则显示 showTabbar 为 true， 否则 showTabbar 为 false。

// store/state.js
const state = {
  isLoading: false,
  showTabbar: true,
}
// store/mutations.js
export const SET_LOADING_STATUS = (state, status) => {
  state.isLoading = status
}
export const SET_SHOW_TABBAR = (state, status) => {
  state.showTabbar = status
}
// root.vue
mounted() {
  let pages = ['/pages/index/index', '/pages/list/list']
  if (pages.includes(this.$route.path)) {
    this.$store.commit('SET_SHOW_TABBAR', true)
  } else {
    this.$store.commit('SET_SHOW_TABBAR', false)
  }
}

通过 state 来存储 tabbar 的显隐状态，mutations 中用于修改状态，root.vue 中用于判断路由路径，从而实现在页面特定位置显示 tabbar。