uniapp中间带加号的底部选项卡的简单制作

前端

2024-01-15 07:02:24

对于一些移动端应用开发来说，底部选项卡非常常见，很多小程序和APP底部都多多少少有一个选项卡，反倒是没有选项卡的应用很少，无论是小程序还是APP，底部选项卡都能让用户快速地切换不同的功能模块，提升用户的操作效率。

使用uniapp做开发的同学，可能会发现并没有现成的底部选项卡组件可以拿来用，需要自己手动开发一个底部选项卡，实现起来并不复杂，只需要几个简单的步骤即可。

步骤一：准备工作

在开始开发底部选项卡之前，我们需要先准备一些东西。

一个uniapp项目
一个文本编辑器
一个浏览器

步骤二：创建底部选项卡组件

首先，我们需要创建一个底部选项卡组件，在uniapp项目中，组件通常是放在components目录下的，因此，我们需要在components目录下创建一个新的文件，并命名为bottom-tabs.vue。

<template>
  <div class="bottom-tabs">
    <nav>
      <a v-for="item in tabs" :key="item.path" :class="{'active': item.path === activePath}" @click="changePath(item.path)">
        <i :class="item.icon"></i>
        <span>{{ item.text }}</span>
      </a>
    </nav>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      required: true
    },
    activePath: {
      type: String,
      required: true
    }
  },
  methods: {
    changePath(path) {
      this.$emit('change', path)
    }
  }
}
</script>

<style scoped>
.bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #ccc;
}

.bottom-tabs nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.bottom-tabs a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25%;
  height: 100%;
  text-decoration: none;
  color: #666;
}

.bottom-tabs a.active {
  color: #333;
}

.bottom-tabs a i {
  font-size: 24px;
}

.bottom-tabs a span {
  font-size: 12px;
}
</style>

步骤三：注册底部选项卡组件

接下来，我们需要将底部选项卡组件注册到uniapp项目中，在main.js文件中，找到Vue.component()方法，并使用该方法注册底部选项卡组件。

import BottomTabs from './components/bottom-tabs.vue'

Vue.component('bottom-tabs', BottomTabs)

步骤四：在页面中使用底部选项卡组件

现在，我们可以开始在页面中使用底部选项卡组件了，首先，我们需要在页面的模板中引入底部选项卡组件。

<template>
  <div>
    <bottom-tabs :tabs="tabs" :active-path="activePath" @change="changePath"></bottom-tabs>
  </div>
</template>

然后，我们需要在页面的脚本中定义tabs和activePath两个属性。

<script>
export default {
  data() {
    return {
      tabs: [
        {
          path: '/home',
          icon: 'icon-home',
          text: '首页'
        },
        {
          path: '/about',
          icon: 'icon-about',
          text: '关于'
        },
        {
          path: '/contact',
          icon: 'icon-contact',
          text: '联系我们'
        }
      ],
      activePath: '/home'
    }
  },
  methods: {
    changePath(path) {
      this.activePath = path
    }
  }
}
</script>

最后，我们需要在页面的样式中为底部选项卡组件设置样式。

<style>
bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #ccc;
}

bottom-tabs nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

bottom-tabs a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25%;
  height: 100%;
  text-decoration: none;
  color: #666;
}

bottom-tabs a.active {
  color: #333;
}

bottom-tabs a i {
  font-size: 24px;
}

bottom-tabs a span {
  font-size: 12px;
}
</style>