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

uniapp+uview-plus实现微信小程序自定义tabbar

news 来源：原创 2025/5/14 16:02:04

参考文档

微信小程序相关开发文档链接：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
虽然是uniapp框架但是实现方式和原生小程序相似

实现思路

1、app.json里面tabBar添加配置 custom:true,其他和非自定义设置一样
2、在components文件夹里添加Tabbar组件
3、在对应的页面里引用Tabbar组件

pages.json 配置代码

{
  "tabBar": {
    "custom": true, //必写
    "color": "#000000",   //color,selectedColor,backgroundColor可不写
    "selectedColor": "#000000", //tab选中颜色
    "backgroundColor": "#000000",
    "list": [{ //每个tab对应的路由路径
      "pagePath": "page/index/index",//此处page前面未加/
      "text": "首页"
    }, {
      "pagePath": "page/index/order",
      "text": "订单"
    },{
      "pagePath": "page/index/myUser",
      "text": "我的"
    },
    ]
  },
}

Tabbar组件代码

HTML代码

<template>
  <u-tabbar 
  	:value="activeIndex" 
  	fixed 
  	activeColor="#11C0D7" 
  	inactiveColor="#8C8C8C"
  >
    <u-tabbar-item
      v-for="(item, index) in tabList"
      :text="item.text"
      :key="index"
      :border="false"
      @click="tabBarChange(item.pagePath, index)"
    >
      <template #active-icon>
        <image class="u-page__item__slot-icon" :src="item.selectedIconPath"></image>
      </template>
      <template #inactive-icon>
        <image class="u-page__item__slot-icon" :src="item.iconPath"></image>
      </template>
    </u-tabbar-item>
  </u-tabbar>
</template>

JS代码

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
const tabList = ref([
  {
    pagePath: 'index',
    text: '首页',
    iconPath: '../../static/images/index.png', //本地图片
    selectedIconPath: '../../static/images/index_select.png'
  },
  {
    pagePath: 'order',
    text: '订单',
    iconPath: '../../static/images/order.png',
    selectedIconPath: '../../static/images/order_select.png'
  },
  {
    pagePath: 'myUser',
    text: '我的',
    iconPath: '../../static/images/user.png',
    selectedIconPath: '../../static/images/user_select.png'
  }
])
const activeIndex = ref(0) //当前选中项
onShow(() => {
  getActiveIndex()
})

// 自定义tab组件监听页面路径选中下标
const getActiveIndex = () => {
  const pages = getCurrentPages()
  let page = pages[pages.length - 1]
  tabList.value.forEach((item: any, index: number) => {
    if (`pages/index/${item.pagePath}` == page.route) {
      activeIndex.value = index
    }
  })
}

function tabBarChange(url: string, index: number) {
  uni.switchTab({
    url
  })
}
</script>

在页面中引入

<!-- 每个tabbar对应的路由页面，page最好添加 padding-bottom:calc(env(safe-area-inset-bottom) + 24rpx + 50px); 50是设置的tabbar的高度，24是留余的页面空白 -->

<template>
	<TabBar />
</template>
<script setup lang="ts">
	import TabBar from '@/components/Tabbar/index.vue'

</script>