vue3+uniapp自定义tabbar

首先把tabbar中的元素写在一个list中用v-for进行渲染
用一个interface进行定义接口，这样别人在review你的代码就可以清晰知道你的tabbar包含什么元素。
利用typescript特性进行类型定义，可以省去很多麻烦

import { reactive } from "vue"
import { Images } from "src/static/images"
export interface Tabbar {
  iconPath: string,
  selectedIconPath: string,
  text: string,
  url: string
}

export const tabBarList = reactive<Tabbar[]>([
  {
    iconPath: Images.Home,
    selectedIconPath: Images.HomeActive,
    text: '首页',
    url: '/pages/home/home',
  },
  {
    iconPath: Images.Personal,
    selectedIconPath: Images.PersonalActive,
    text: '我的',
    url: '/pages/personal/personal',
  }
])

<template>
  <view class="tabbar-container">
    <view v-for="(item, index) in tabBarList" :key="index" :url="item.url" :class="{ 'active': activeIndex === index }">
      <view class="icon-container" @click="switchTab(index)">
        <view class="icon">
          <image class="icon-image" :src="activeIndex === index ? item.selectedIconPath : item.iconPath" />
        </view>
        <view class="text">{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>

渲染好之后，tabbar有个点击跳转页面，以及点亮图标
点亮图标，这边的currentPath一定注意格式，打印出getCurrentPages()[0].route就会发现它是pages/personal/personal，而不是/pages/personal/personal

//vue
<view class="icon">
          <image class="icon-image" :src="activeIndex === index ? item.selectedIconPath : item.iconPath" />
 </view>
 //js
 const currentPath =  "/" + getCurrentPages()[0].route;
tabBarList.forEach((item, index) => {
  if (item.url === currentPath) {
    store.activeIndex = index;
    uni.switchTab({
      url: item.url,
    })
  }
})

跳转：由于是page页面，因此必须用switchtab方法而不能用nacigatorTo;这边的index及页面序号必须存储在pinia库中，否则界面一刷新它就不变了。

function switchTab(index) {
  if (index === store.activeIndex) {
    return
  }
  store.setActiveIndex(index)
  uni.switchTab({
    url: tabBarList[index].url
  })
}

import { defineStore } from 'pinia'

interface State {
  activeIndex: number;
  sceneId: number;
  isLogin: boolean;
  nickname: string;
  avatar: string
}

export const useTabbarStore = defineStore('store', {
  state: (): State => {
    return { 
      activeIndex: 0,
      isLogin: false,
      sceneId: 1,
      nickname: '立即登录',
      avatar: 'https://bestwellai-aigo.oss-cn-shanghai.aliyuncs.com/icon/personal/personal_avatar.svg' 
    }
  },
  actions: {
    setActiveIndex(index) {
      this.activeIndex = index;
    },
    setUsername(nickname,avatar){
      this.nickname = nickname;
      this.avatar = avatar;
    },
    setSceneId(sceneId) {
      this.sceneId = sceneId;
    }
  },
})

完成效果：自定义的效果就是样式可以自己写，非常方便；以及一个小程序需要三四种形式的tabbar时可以这样操作。
在这里插入图片描述