阅读 7769

小程序踩坑之旅--动态设置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的实现,问题很简单,代码量也不多,但是也确确实实让我卡了两天进度。不过这也让我明白了解决问题的思路其实比代码的实现更重要,如果方向不合适,再多的工作量也是事倍功半甚至南辕北辙。

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

      

        


文章分类
前端