对于UniApp中自定义TabBar不闪烁的问题，你可以尝试以下代码：
1. 在App.vue中，设置tabBar的配置项`custom: true`，以及在`onLaunch`生命周期函数中调用`uni.hideTabBar()`来隐藏原生的TabBar。
```vue
<template>
<div>
<
cu-custom-tab-bar></
cu-custom-tab-bar>
</div>
</template>
<script>
export default {
onLaunch() {
uni.hideTabBar()
}
}
</script>
```
2. 创建一个名为`
cu-custom-tab-bar.vue`的组件，用于自定义TabBar的样式和行为。
```vue
<template>
<div class="
cu-custom-tab-bar">
<div
v-for="(item, index) in tabBarList"
:key="index"
@click="switchTab(index)"
:class="['cu-tab', current === index ? 'cu-tab-active' : '']"
>
<div class="cu-tab-icon">
<img :src="current === index ? item.selectedIconPath : item.iconPath" alt="" />
</div>
<div class="cu-tab-text">{{ item.text }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
current: 0, // 当前选中的Tab索引
tabBarList: [
{
iconPath: '/static/tabBar/home.png',
selectedIconPath: '/static/tabBar/home_active.png',
text: '首页'
},
{
iconPath: '/static/tabBar/cart.png',
selectedIconPath: '/static/tabBar/cart_active.png',
text: '购物车'
},
{
iconPath: '/static/tabBar/user.png',
selectedIconPath: '/static/tabBar/user_active.png',
text: '我的'
}
]
}
},
methods: {
switchTab(index) {
// 切换Tab
this.current = index
// 执行相应的操作，比如跳转页面等
// ...
}
}
}
</script>
<style>
/* 样式自定义，请根据需要修改 */
.
cu-custom-tab-bar {
display: flex;
justify-content: space-around;
align-items: center;
height: 50px;
background-color: #fff;
}
.cu-tab {
display: flex;
flex-direction: column;
align-items: center;
}
.cu-tab-icon img {
width: 24px;
height: 24px;
}
.cu-tab-text {
font-size: 12px;
margin-top: 2px;
}
.cu-tab-active {
color: #007aff; /* 选中时的颜色 */
}
</style>
```
以上代码是一个简单的示例，你可以根据自己的需求进行修改和扩展。希望能帮到你！
8433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
