小程序踩坑之旅--动态设置tabBar

      最近做了几个小程序项目，几乎每个项目中都会用到小程序的tabBar。今天我们就一起来愉快的玩一下这个东西吧。

一.初与君相识

      我们先从最初的版本也是最简单的版本开始吧。小程序的配置项里已经帮我们准备了tabBar的一切，我们只需要按照文档中的格式在app.json中配置tabBar的内容就可以实现一个十分不错的tabBar了。

tabBar: {
      list: [{
        pagePath: 'pages/main/index',
        text: '首页'
      }, {
        pagePath: 'pages/main/logs',
        text: '日志'
      }, {
        pagePath: 'pages/main/test',
        text: '测试'
      }]    
}

      没错，就这么简单，我们已经实现了一个tabBar了。而且我们还可以直接在配置项里设置文字颜色，背景，图标等等内容。这也太简单了点吧，一点成就感都没有😏。

二.出师未捷身先死

      在我开开心心敲着代码的时候，万恶的产品来了😠。

      “现在我们要加一个角色，不同角色权限功能不同，登录后底部的tab也不同。”

      “啊？！”

      “这对你来说很简单吧？就是加个角色的判断和做一些新页面。”

      “你说什么就是什么吧🤷‍♂️🤷‍♂️”

      于是我再次点开了app.json。嗯？不对啊？app.json本身是一个静态配置文件，根本就不可能实现动态设置嘛。算了，这么辣鸡的东西，我自己来写一个吧。

三.屋漏偏逢连夜雨

       既然官方提供的配置靠不住，还不如自己动手，丰衣足食。不就是一个tabBar组件吗，随便写一写样式，用wx.reLaunch来做跳转，so easy啊。想了想代码就还是不贴了，毕竟github或其他网站上有非常多现成的代码写得可比我好多了，我的代码就不拿出来装(diu)逼(ren)了。

      不管怎么样问题解决了，提交代码，收工回家吧，还可以和小姐姐一起吃个晚饭，岂不美哉？然而第二天一到公司，测试妹子笑眯眯的看着我，我本能地感觉到事情似乎没那么简单。

      “你这个tab页切换的时候怎么老是会闪一下啊？”

      “额，这个...应该...不是...什么大问题吧?”

      “可是别的小程序都没有这个问题的呀，这个一直闪一直闪我的眼睛都要瞎掉了啦～～，小哥哥～～改一下嘛～～好不好嘛～～”

      。。。

四.柳暗花明又一村

      。。。

      没错我可耻的沦陷了，改吧。这绝对最后一次了，以后不可能再吃你这套！！(测试：上次你好像也是这么说的喔～)

      算了，看来这个方案也不靠谱。那如果把几个页面合并到一个页面上，用tab页的形式切换，点击的时候只替换内容不跳转页面不久没有闪烁的问题了吗。说干就干，上代码！！

<template>
  <view>
    <!-- 每个tab页的内容，如果页面太大可以分离出去，这里用简单的view表示tab页 -->
    <view wx:if="{{list[0].checked}}">首页</view>
    <view wx:if="{{list[1].checked}}">日志</view>
    <view wx:if="{{list[2].checked}}">测试</view>
    <!-- 底部tabBar -->
    <view class="bottom-tab">
      <repeat for="{{list}}" key="index" index="index" item="item">
        <view @tap="bindChange({{item}})" class="bottom-tab-inner">
          <view style="color: {{item.checked ? '#000000' : '#999'}}">{{item.text}}</view>        </view>      </repeat>    </view>  </view></template>

<script>
  import wepy from 'wepy'
  export default class Index extends wepy.page {
    data = {
      list: [{
        text: '首页',
        checked: true
      }, {
        text: '日志',
        checked: false
      }, {
        text: '测试',
        checked: false
      }]
    }
    methods = {
      bindChange (el) {
        this.list.forEach(item => {
          item.checked = (item.text === el.text)
        })
        this.$apply()
      }
    }
  }
</script>

<style lang="less" scoped>
  .bottom-tab{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 88rpx;
    border-top: 1px solid #666;
    display: flex;
    &-inner{
      flex-grow: 1;
      text-align: center;
      line-height: 88rpx;
    }
  }
</style>

      这样在UI上就实现了小程序tabBar的基础功能，而且可以在这个的基础上加上各种自定义的内容，但是现在还有一个小问题，现在页面切换的时候不能改变顶部导航条的文字。所以我们还需要调用一下wx.setNavigationBarTitle这个api，把bindChange稍作改动：

bindChange (el) {
  this.list.forEach(item => {
    item.checked = (item.text === el.text)
  })
  wepy.setNavigationBarTitle({title: el.text})
  this.$apply()
}

        大功告成！！！

总结

      文中涉及的东西很小，就只是一个tabBar的实现，问题很简单，代码量也不多，但是也确确实实让我卡了两天进度。不过这也让我明白了解决问题的思路其实比代码的实现更重要，如果方向不合适，再多的工作量也是事倍功半甚至南辕北辙。

      前端小白第一次写文章，技术有限且文采一般，如果有看到错误或者不合理的地方，欢迎各位大佬帮忙指正。如果万幸能帮到他人，也算是一种福分吧。