uniApp开发小程序，自定义tabBar底部导航栏并实现tabBar中间凸起自定义样式

2024-01-28 23:04:27

uniApp：在移动端跨平台开发的利器

对于移动应用程序开发者来说，uniApp无疑是一个福音。它是一个使用 Vue.js 框架跨平台开发应用程序的工具，这意味着您可以使用一套代码库同时面向 iOS、Android、H5 和小程序等平台。

打造个性化的底部导航栏

底部导航栏（TabBar）是移动应用程序中不可或缺的元素，uniApp 为自定义 TabBar 提供了丰富的 API。下面是如何使用 uniApp 自定义底部导航栏：

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

const app = new Vue({
  render: h => h(App)
})

app.$mount()

// App.vue
<template>
  <view>
    <u-tabbar>
      <u-tabbar-item
        icon="home-o"
        text="首页"
        to="/pages/index/index"
      />
      <u-tabbar-item
        icon="apps-o"
        text="应用"
        to="/pages/apps/index"
      />
      <u-tabbar-item
        icon="user-o"
        text="我的"
        to="/pages/user/index"
      />
    </u-tabbar>
  </view>
</template>

<script>
export default {
  name: 'App'
}
</script>

实现 TabBar 中间的凸起效果

要实现 TabBar 中间的凸起效果，需要借助 CSS 的力量：

/* TabBar 中间凸起样式 */
.u-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #ccc;
}

.u-tabbar-item {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: #666;
}

.u-tabbar-item.active {
  color: #333;
}

.u-tabbar-item:first-child {
  border-left: 1px solid #ccc;
}

.u-tabbar-item:last-child {
  border-right: 1px solid #ccc;
}

/* TabBar 中间凸起样式 */
.u-tabbar-凸起 {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: #f90;
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}