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。这样效果会好一些。虽然第一次进去还是会闪一下,不过问题不大,没有客户提就不用改了。

相关推荐
西西木科技丨Shopify开发机构3 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙10 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1111 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆15 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er20 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0623 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444026 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆26 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子29 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain936 分钟前
Gradle 8.11.1的升级之旅
前端