uni-app动态配置TabBar

之前我们公司要用uni-app开发一个新项目,要求是根据登录账号的权限动态展示tabBar。tabbar中的icon也使用的是网络图片,通过调用接口获得。总结一下配置的方法。

配置tabbar的几种方法:

一、pages.json中配置

一般来说,tabBar是在pages.json中配置。具体可参考uni-app官方文档 地址可点击

常见好用,但无法满足我们动态配置tabbar文字和图片的需求。

二、使用custom-tab-bar内置组件

这个组件也是根据pages.json中的信息生成的tabbar,可以支持更好的css,但是看了一下,平台只支持H5,兼容性较差。 文档地址 可以看一下文档参考。

三、uni.setTabBarItem方法

这个方法可以动态设置tabbar。参数如下:

一开始我们采用的是这个方法,说实话这个方法挺好用的。 在用户登陆后获得对应权限,调用uni.setTabBarItem,用visible和iconPath确定底部的导航栏的每一项是否展示以及图标。 文字、图标、是否可使都可以配置,包括文字的颜色什么的,结果真机测试的时候发现图标不展示,后面发现文档写着呢,iconPath这个属性除了微信小程序 2.7.0+、支付宝小程序支持网络图片,其他平台都不支持。如果有人只是单纯配置一下权限,icon图片放在本地的,用这个方法还是比较合适的。我们除了权限,还做了皮肤功能,图标经常改来改去,不方便经常一直往本地塞图标,所以这个方法只能忍痛放弃了。

四、uview的tabbar组件

其实使用uview之类的组件库的组件和自己写组件也是比较类似的,这里使用了uview的组件,也省去了一些样式的编写。使用组件,也不代表pages.json的tabbar不用配置,写还是要写的,把所有的都写进去,但是可以不用配图标,然后使用uni.hideTabBar()方法将原生的tabbar隐藏。

它的主要优点是可以自定义图标,包括网络图片。

uview的tabbar文档链接

我们的做法是,基于uview的tabbar,写一个公用的组件。在用户登录后调用接口获取当前权限以及图标url,生成一个u-tabbar-item的list,使用uni.setStorage方法存在本地,在公用组件中获取list,并渲染,其他需要用到底部导航栏的页面引入这个组件。

js 复制代码
<template>
  <view class="my-tabbar">
    <u-tabbar
      :value="value"
      @change="changeTab"
      :fixed="true"
      :placeholder="false"
      :safeAreaInsetBottom="false"
      :activeColor="color"
    >
      <u-tabbar-item v-for="item in list" :key="item.key" :text="item.text">
        <image
          v-if="item.selectedIconPath"
          class="icon"
          slot="active-icon"
          :src="item.selectedIconPath"
        ></image>
        <image class="icon" slot="inactive-icon" :src="item.iconPath"></image>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

在methos中有一个changeTab方法,使用uni.switchTab切换tabbar。这样效果会好一些。虽然第一次进去还是会闪一下,不过问题不大,没有客户提就不用改了。

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止8 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python
雪芽蓝域zzs8 小时前
uniapp 国密sm2加密
uni-app