超详细版:HBuilderX中实现uniapp小程序动态tabBar

文章讲述了在开发过程中如何根据用户登录状态动态展示tabBar。首先在Page.json配置所有可能的页面,然后隐藏导航栏,定义publicBar和selfBar公共及个人导航数据,使用Vuex管理用户信息和tabBar列表,根据用户状态决定显示哪个tabBar。最后创建自定义tabBar组件并在各页面使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

开发过程中遇到了动态tabBar的需求,用户登录后要根据用户信息动态展示tab栏,这里跟PC端的用户权限页面是一个意思,核心步骤就是:

  1. 先在Page.json文件中tabBar/list数组内配置好所有需要展示的页面,这里只需要在list各对象中设置好pagePath这个必填属性就好(必填属性,不填控制台报错,无法展示导航页面)

"list": [{
        "pagePath": "pages/tabBar/home/home",
      },
      {
        "pagePath": "pages/tabBar/inspect/inspect",
      },
      {
        "pagePath": "pages/tabBar/cart/cart",
      },
      {
        "pagePath": "pages/tabBar/mine/mine",
      }, 
      {
        "pagePath": "pages/tabBar/centerBar/centerBar",
      }
    ]
  1. 隐藏所有tabBar页面对应的.vue页面的导航栏

    onReady() {
      uni.hideTabBar()//隐藏导航栏方法
    }
  1. 根据需求确定publicBar公共导航数据 及 selfBar个人导航数据,需定义如下.js文件:

export const publicBar = [{
    "pagePath": "/pages/tabBar/home/home",
    "iconPath": require("@/static/home_line.png"),
    "selectedIconPath": require("@/static/home_line (1).png"),
    "text": "首页"
  },
  {
    "pagePath": "/pages/tabBar/inspect/inspect",
    "iconPath": require("@/static/car_black.png"),
    "selectedIconPath": require("@/static/car_light.png"),
    "text": "验货"
  }, {
    "pagePath": "/pages/tabBar/cart/cart",
    "iconPath": require("@/static/shopping_cart_line.png"),
    "selectedIconPath": require("@/static/shopping_cart_line (1).png"),
    "text": "购物车"
  }, {
    "pagePath": "/pages/tabBar/mine/mine",
    "iconPath": require("@/static/user_circle_line.png"),
    "selectedIconPath": require("@/static/user_circle_line (1).png"),
    "text": "我的"
  }
]

export const selfBar = [{
  "pagePath": "/pages/tabBar/centerBar/centerBar",
  "iconPath": require("@/static/add_line.png"),
  "selectedIconPath": require("@/static/add_line (1).png"),
  "text": "个人中心"
}]
  1. 根据用户身份或登录状态匹配出需要展示的tabBar页面,建立vuex进行存储

//导入上方定义好的两组tabBar数据
import {
  publicBar,
  selfBar
} from '@/utils/myTabBar.js';
export default {
  namespaced: true,
  state: {
    userInfo: uni.getStorageSync('userInfo') || {},
    tabBarList: publicBar,
    activeIndex: uni.getStorageSync('acIndex') || 0,  //本地化index 控制页面刷新导航高亮位置不变
  },
  mutations: {
    //用户登录后触发次方法存储用户信息
    setUserInfo(state, obj) {
      uni.setStorageSync('userInfo', obj)
      console.log(obj, 'storage');
      state.userInfo = obj;
      //判断用户是否登录,登录后将个人导航栏加入要展示的数组中(大家根据需求来做)
      obj.nickName && (state.tabBarList = [...publicBar, ...selfBar])
    },
    //用户改变当前高亮的导航栏后进行记录
    changeIndex(state, index) {
      uni.setStorageSync('acIndex', index)
      state.activeIndex = index
    }
  },
  getters: {
    //根据用户信息的改变俩获取到最新的导航栏数据
    barList(state) {
      return state.userInfo.nickName ? [...publicBar, ...selfBar] : state.tabBarList
    }
  }
}
  1. 自定义tabBar组件:在根目录下创建components/myTabBar/myTabBar.vue文件

  1. 引入vuex中tabBar数据,搭建tabBar结构:

<template>
  <view class="tabBarList">
    <view class="Item" v-for="(item, index) in barList" :key="index" @click="changeActive(item, index)">
      <image class="img" :src="activeIndex === index ? item.selectedIconPath : item.iconPath"></image>
      <view style="font-size: 12px;">{{ item.text }}</view>
    </view>
  </view>
</template>


<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState('user', ['activeIndex']),
    ...mapGetters('user', ['barList'])
  },
  methods: {
    ...mapMutations('user', ['changeIndex']),
    //用户触发tabBar改变当前高亮并跳转至对应页面
    changeActive(item, index) {
      this.changeIndex(index)
      uni.switchTab({
        url: item.pagePath
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.tabBarList {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  border: 1px solid #ccc;
  overflow: hidden;
  .Item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .img {
      width: 50rpx;
      height: 50rpx;
    }
  }
}
</style>
  1. 最后一步:在各导航栏.vue文件中使用该组件即可

<template>
  <view>
    <tabBarList></tabBarList>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    },
    onReady() {
      uni.hideTabBar()
    }
  }
</script>

<style lang="scss">

</style>
HBuilderXUniApp都是基于Vue.js的前端开发工具,它们可以帮助开发者快速构建跨平台的应用,包括微信小程序。在微信小程序中,IconFont是一个常用的资源库,它提供了一系列矢量图标,可以方便地用于创建个性化的TabBar(底部导航栏)。 为了在HBuilderXUniApp中使用IconFont实现自定义的TabBar,你可以按照以下步骤操作: 1. **注册并获取IconFont资源**:首先,你需要在IconFont官网注册账号,并选择一款你喜欢的小程序适配的图标集,下载相应的CSS和SVG文件。 2. **引入IconFont CSS**:在项目中引入IconFont的CSS文件,通常放在`static/css/iconfont.css`这类路径下,确保在页面引用这个CSS。 3. **添加自定义标签**:在WXML文件(小程序的模板文件)中,创建一个`<view>`或其他容器元素,设置其class为包含IconFont类名的值,如`.iconfont-icon-your-icon-name`。 4. **动态绑定事件**:使用JavaScript或者Vue.js,为这些自定义的标签添加点击事件处理,比如通过`bindtap`属性触发对应的函数,切换页面内容。 5. **配置TabBar**:在JSON配置文件(如`app.json`)里,设置`pages`数组,每个页面的`window`字段下的` tabBar`配置项,指明哪些页面显示相同的TabBar,并指定对应的图标。 ```json { "tabBar": { "color": "#fff", "selectedColor": "#f00", "list": [ {"pagePath": "index", "text": "首页", "iconPath": "iconfont://your-icon-name"}, // 添加其他页面... ] } } ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值