uview tabbar 自定义样式, 写一个

UView TabBar是UView框架中的一个组件，用于创建底部导航栏。如果你想自定义其样式，你可以通过CSS或直接操作组件属性来实现。以下是一个简单的例子，展示如何在Vue中定制UView TabBar的样式：

<template>
  <u-tabs class="custom-tab-bar" :active-color="#fff" :inactive-color="#ccc">
    <u-tab v-for="(item, index) in tabsItems" :key="index" :title="item.title">{{ item.title }}</u-tab>
  </u-tabs>
</template>

<style scoped>
.custom-tab-bar {
  /* 设置基本样式 */
  background-color: #333;
  border-bottom-width: 0;
}

.custom-tab-bar .u-tabs__tab {
  /* 设置每个标签的样式 */
  font-size: 16px;
  padding: 15px 20px;
  margin-right: 8px;
  
  /* 指定选中和未选中的颜色 */
  color: .active ? '#fff' : '#ccc';
  
  /* 添加鼠标悬停效果 */
  transition: background-color 0.3s ease;
}

.custom-tab-bar .u-tabs__tab:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>

<script>
export default {
  data() {
    return {
      tabsItems: [
        { title: 'Tab 1' },
        { title: 'Tab 2' },
        { title: 'Tab 3' }
      ]
    };
  }
};
</script>

在这个例子中，我们设置了背景色、文字颜色、边距等属性，并添加了悬停效果。你可以根据需要进一步调整样式。