uniApp自定义tabBar底部导航栏+实现tabBar中间凸起自定义样式

new出一个对象

已于 2024-06-03 09:46:00 修改

阅读量1.9k

点赞数 4

CC 4.0 BY-SA版权

文章标签： uni-app 前端 javascript

于 2024-05-28 17:59:16 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52830464/article/details/139273523

一.配置信息

pages.js 添加 "custom": true 属性

二. 定义TabBar组件

<template>
	<view class="tabbar-container">
		<view v-for="(item,index) in tabbarList" :class="[item.centerItem && 'center-item'  ,'tabbar-item']"
			@click="changeItem(item)" :key="item.id">
			<view class="item-top">
				<image v-if="item.id!==2" :src="activeTab===item.path?item.selectIcon:item.icon"
					:class="[activeTab===item.path&&'active']"></image>
				<text v-else class="iconfont icon-add"></text>
			</view>
			<view :class="[activeTab===item.path ? 'item-active' : '','item-bottom']">
				<text class="text">{
  
  {item.t