uniapp是一个跨平台开发框架，可以让开发者使用vue语法快速搭建多种平台的应用。其中，uniapp自带的tabbar组件可以方便地实现底部导航栏的功能，但是默认的样式可能无法满足我们的需求，所以我们需要自定义设置tabbar样式。下面我会详细介绍uniapp自定义tabbar样式的方法。
- 创建一个tabBar.vue组件
在uniapp项目的components目录下创建一个名为tabBar的组件，该组件作为tabbar的基础组件，包含了tabbar的整体布局和切换效果。
tabBar.vue组件的模板代码如下：
<template>
<view class="uni-tabbar">
<view
v-for="(item, index) in list"
:key="index"
@click="onTabBarClick(index)"
:class="['uni-tabbar-item', { 'uni-tabbar-item-active': index === activeIndex }]"
>
<view class="uni-tabbar-item-icon">
<img :src="index === activeIndex ? item.selectedIconPath : item.iconPath" />
</view>
<view class="uni-tabbar-item-text">{{ item.text }}</view>
</view>
</view>
</template>- 在主页Home.vue中引入tabBar组件
在主页中引入tabbar组件，并将tabbar的list数据绑定到主页中。tabbar的list数据是一个数组，里面包含了每个tab以及其对应的icon、文字等信息。
Home.vue的模板代码如下：
<template>
<view class="container">
<view>
<router-view></router-view>
</view>
<tabBar :list="list" :active-index="activeIndex" @change="onTabBarChange"></tabBar>
</view>
</template>
<script>
import tabBar from "@/components/tabBar"
export default {
name: "Home",
components: { tabBar },
data() {
return {
activeIndex: 0,
list: [
{
iconPath: "/static/tab_home.png",
selectedIconPath: "/static/tab_home_active.png",
text: "首页",
},
{
iconPath: "/static/tab_message.png",
selectedIconPath: "/static/tab_message_active.png",
text: "消息",
},
{
iconPath: "/static/tab_mine.png",
selectedIconPath: "/static/tab_mine_active.png",
text: "我的",
},
],
};
},
methods: {
onTabBarChange(index) {
this.activeIndex = index;
},
},
};
</script>- 自定义tabbar样式
自定义tabbar样式需要在App.vue中进行，因为tabbar是整个应用共享的，所以我们需要在App.vue中进行样式的定义。这里我将自定义三种样式效果。
样式一：修改图标的大小和位置
<style lang="scss">
.uni-tabbar-item-icon {
position: relative;
top: -3px; //图标向上偏移
img {
width: 24px; //图标宽度
height: 24px; //图标高度
}
}
</style>样式二：修改文字大小和颜色
<style lang="scss">
.uni-tabbar-item-text {
font-size: 12px; //文字大小
color: #999; //文字颜色
}
.uni-tabbar-item-active .uni-tabbar-item-text {
color: #007aff; //选中状态下文字颜色
}
</style>样式三：添加背景色和阴影
<style lang="scss">
.uni-tabbar {
position: fixed;
left: 0;
bottom: 0;
display: flex;
width: 100%;
height: 55px; //tabbar高度
background-color: #fff; //背景色
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1); //阴影
z-index: 100;
}
</style>- 最终效果
通过以上自定义设置tabbar样式的步骤，我们成功地实现了对tabbar组件的自定义样式设置。效果如下：
总结
通过vue语法和uniapp框架提供的tabbar组件，我们可以快速地实现底部导航栏的功能。同时，通过自定义设置tabbar的样式，我们可以让tabbar符合我们的需求，提高应用的用户体验。
