当前位置: 首页 > news >正文

uniApp 设置动态tabs(不是自定义tab哈)

我写的不是自定义 tabs 是切换 tab 的图标等

这里可以切换页面绝对路径 必须在 pages 中先定义 被替换掉的 pagePath 不会变成普通页面(仍然需要使用 uni.switchTab 跳转)

const tabbarConfig = {
  'mk-dev': {
    home: {
      icon: 'static/tabs/mk/home.png',
      activeIcon: 'static/tabs/mk/homeActive.png'
    },
    order: {
      icon: 'static/tabs/mk/order.png',
      activeIcon: 'static/tabs/mk/orderActive.png'
    },
    user: {
      icon: 'static/tabs/mk/user.png',
      activeIcon: 'static/tabs/mk/userActive.png'
    }
  },
  'default': {
    home: {
      icon: 'static/tabs/zs/home.png',
      activeIcon: 'static/tabs/zs/homeActive.png'
    },
    order: {
      icon: 'static/tabs/zs/order.png',
      activeIcon: 'static/tabs/zs/orderActive.png'
    },
    user: {
      icon: 'static/tabs/zs/user.png',
      activeIcon: 'static/tabs/zs/userActive.png'
    }
  }
}

// 这里接收env环境 在app.vue中调用
export const getTabBarConfig = (env) => {
  return tabbarConfig[env] || tabbarConfig.default
}
<script>
  import { getTabBarConfig } from '@/config/tabbar'

  export default {
    onLaunch: function () {
      const env = import.meta.env
      // ---------下面根据环境 切换tabBar图标
      const tabConfig = getTabBarConfig(env.MODE)
      // 动态设置 tabBar 图标
      // 写到这里的时候 记得看下我最开头标明的文字 谢谢
      uni.setTabBarItem({
        index: 0,
        iconPath: tabConfig.home.icon,
        selectedIconPath: tabConfig.home.activeIcon
      })
      uni.setTabBarItem({
        index: 1,
        iconPath: tabConfig.order.icon,
        selectedIconPath: tabConfig.order.activeIcon
      })
      uni.setTabBarItem({
        index: 2,
        iconPath: tabConfig.user.icon,
        selectedIconPath: tabConfig.user.activeIcon
      })
    },
    onShow: function () {
      console.log('App Show')
    },
    onHide: function () {
      console.log('App Hide')
    }
  }
</script>

<style lang="scss">
  /*每个页面公共css */
  @import 'nutui-uniapp/styles/index.scss';
</style>
http://www.dtcms.com/a/122790.html

相关文章:

  • 在执行生信分析的时候提示缺少一些R包的报错解决
  • WebForms ViewState
  • SnowNLP 使用大全
  • Scala Iterator(迭代器)
  • 算法进阶指南 袭击
  • 蓝桥杯 跑步计划(模拟日期)
  • JMeter从入门到荒废-常见问题汇总
  • go游戏后端开发30:弃牌逻辑与后续操作
  • vue3中左右布局两个个组件使用vuedraggable实现左向右拖动,右组件列表可上下拖动
  • rook-ceph xx/xxx objects misplaced (xx%)
  • 基于大模型应用技能的学习路径
  • NO.80十六届蓝桥杯备战|数据结构-字符串哈希|兔子与兔子(C++)
  • CCRC 与 EMVCo 双认证:中国智能卡企业的全球化突围
  • git 总结遇到的问题
  • B+树与红黑树
  • 第三章:SQL 高级功能与性能优化
  • CentOS 中下载rpm包并安装
  • PhpStorm配置函数和文件注释模板
  • Python设计模式:工厂模式
  • 凯斯西储大学CWRU数据集变体
  • python中的数据模型-pydantic浅讲
  • 02_SQL分库分表及Java实现
  • 【重构谷粒商城12】npm快速入门
  • Python第八章:数据可视化——Json数据
  • Android 开发中compileSdkVersion 和 targetSdkVersion
  • Vue2下载二进制文件
  • 【动手学深度学习】LeNet:卷积神经网络的开山之作
  • 【面试】封装、继承、多态的具象示例 模板编程的理解与应用场景 链表适用的场景
  • 【vue】slot插槽:灵活内容分发的艺术
  • R语言——散点图