详细介绍uniapp自定义tabbar样式的方法-uni-app-PHP中文网

详细介绍uniapp自定义tabbar样式的方法

PHPz

发布： 2023-04-25 10:47:16

原创

7086人浏览过

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>

登录后复制

样式二：修改文字大小和颜色

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

查看详情

<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>

登录后复制