在uniApp中，自定义tabBar底部导航栏可以通过修改pages.json文件中的tabBar配置来实现。如果需要实现中间凸起的自定义样式，可以通过创建自定义组件来实现。
以下是一个简单的示例，展示了如何在uniApp中自定义tabBar及其样式：
- 在
pages.json中配置自定义tabBar：
{
"globalStyle": {
// ...
},
"tabBar": {
"custom": true,
"list": [
{
"pagePath": "pages/home/home",
"text": "首页"
},
{
"pagePath": "pages/mine/mine",
"text": "我的"
}
]
}
// ...
}- 创建自定义tabBar组件（例如：
components/custom-tab-bar/custom-tab-bar.vue）：
<template>
<view class="tab-bar">
<block v-for="(item, index) in tabBarList" :key="index">
<view class="tab-bar-item" @click="switchTab(item)">
{{ item.text }}
</view>
</block>
<view class="tab-bar-middle">
<!-- 中间凸起的自定义样式 -->
</view>
</view>
</template>
<script>
export default {
props: {
tabBarList: {
type: Array,
default: () => [],
},
},
methods: {
switchTab(item) {
uni.switchTab({
url: item.pagePath,
});
},
},
};
</script>
<style>
.tab-bar {
display: flex;
/* 其他样式 */
}
.tab-bar-item {
/* 列表项通常的样式 */
}
.tab-bar-middle {
/* 中间凸起自定义样式 */
}
</style>- 在App.vue中引用自定义tabBar组件：
<template>
<view>
<custom-tab-bar :list="tabBarList" />
</view>
</template>
<script>
import CustomTabBar from './components/custom-tab-bar/custom-tab-bar.vue';
export default {
components: {
CustomTabBar,
},
data() {
return {
tabBarList: [
{
pagePath: '/pages/home/home',
text: '首页',
},
{
pagePath: '/pages/mine/mine',
text: '我的',
},
// 可以添加更多的tab项
],
};
},
};
</script>在这个例子中，我们创建了一个自定义的tabBar组件，并通过props传递了导航项列表。组件中使用了v-for来循环渲染每个tab项，并且有一个tab-bar-middle区域用于自定义中间凸起的样式。点击某个项时，通过调用uni.switchTab来切换页面。
你可以根据自己的设计需求，在custom-tab-bar.vue中的<style>标签内添加CSS样式，并在<view class="tab-bar-middle">内添加中间凸起的自定义样式。