uni-app实现底部tab栏中间突起

发布于 1周前 作者 itying888 来自 Uni-App

uni-app实现底部tab栏中间突起

需求

项目用uniapp开发，突然收到一个需求，实现底部tab栏突起的效果

实现

为了实现这样的效果，先查了官方文档，给出了两个方案

  1. 自定义实现tab栏展示
    因为主要开发app，为了体验性还是决定用官方原生tab

  2. 按官方文档配置tabbar
    在官方文档中，可以配置tab栏中间突起；
    原文：中间带+号的tabbar模板例子，参考。可跨端，但+号不凸起。如需中间凸起，配置tabbar的midButton。
    官方文档
    但是有个问题，点击中间不是一个新的页面，还是触发点击事件，在app.vue 中监听。
    我的想法是先写一个页面，然后在点击事件中做跳转

export default {  
    onLaunch: function() {  
        // 点击中间按钮  
        uni.onTabBarMidButtonTap(() => {  
            uni.navigateTo({  
                url: '/pages/index/index'  
            })  
        })  
    }  
}

"pages": [   
    {
        "path": "pages/index/home",  
        "style":                                                                                      
        {  
            "navigationBarTitleText": "首页",  
            "enablePullDownRefresh": false  
        }
    },
    {
        "path": "pages/index/index",  
        "style":                                                                                      
        {  
            "navigationBarTitleText": "uniapp",  
            "enablePullDownRefresh": false  
        }
    }
]

但是明显问题来了，我是切换tab页，不是跳转到新的页面，这样会存在明显的页面跳转动画还有返回。
那我把页面加到page.json的 tabbar中，但这样就会在底部多一个标签选项。
正在我百思不得其解的时候，我注意到tabbar有个属性，visible：是否显示
这样好办了，我把visible设为false，监听改为

uni.onTabBarMidButtonTap(() => {  
    uni.switchTab({  
        url: '/pages/index/index'  
    })  
})

page.json tabbar设置

"tabBar": {  
    "borderStyle": "black",  
    "backgroundColor": "#fff",  
    "color": "#8F8F94",  
    "selectedColor": "#1EC2A0",  
    "list": [
        {
            "pagePath": "pages/index/home",  
            "iconPath": "static/home.png",  
            "selectedIconPath": "static/homeSelected.png",  
            "text": "首页"
        },  
        {
            "pagePath": "pages/index/market",  
            "iconPath": "static/market.png",  
            "selectedIconPath": "static/market.png",  
            "text": "商城"
        },  
        // #ifdef APP-PLUS  
        {
            "pagePath": "pages/index/index",  
            "iconPath": "static/fabu.png",  
            "selectedIconPath": "static/fabu.png",  
            "text": "发布",  
            "visible": false
        },  
        // #endif  
        // #ifndef APP-PLUS  
        {
            "pagePath": "pages/index/index",  
            "iconPath": "static/fabu.png",  
            "selectedIconPath": "static/fabu.png",  
            "text": "发布"
        },  
        // #endif  
        {
            "pagePath": "pages/index/cart",  
            "iconPath": "static/shopCart.png",  
            "selectedIconPath": "static/shopCartSelect.png",  
            "text": "购物车"
        },  
        {
            "pagePath": "pages/index/mine",  
            "iconPath": "static/mine.png",  
            "selectedIconPath": "static/mineSelected.png",  
            "text": "我的"
        }
    ],  
    "midButton": {  
        "iconPath": "static/fabu.png",  
        "iconWidth": "60px",  
        "height": "65px"
    }
}

这样就是实现了中间tab页面突起图标加跳转

源码下载

下载源码

信息类别 描述
开发环境 UniApp
版本号 未提及具体版本号
项目创建方式 通过UniApp框架创建

Harmonyos Next教程
1 回复

在uni-app中实现底部Tab栏中间突起的效果，可以通过自定义Tab栏组件，并结合CSS样式来实现。以下是一个简单的示例代码，展示如何创建一个自定义的底部Tab栏，并使其中间的Tab项突起。

首先，我们需要创建一个自定义组件，比如CustomTabBar.vue：

<template>
  <view class="tab-bar">
    <view 
      v-for="(item, index) in tabList" 
      :key="index" 
      :class="['tab-item', { active: currentIndex === index }]" 
      @click="switchTab(index)"
      :style="{ transform: currentIndex === index ? 'translateY(-10px)' : 'translateY(0)' }"
    >
      <image :src="item.iconPath" class="tab-icon"></image>
      <text class="tab-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      tabList: [
        { text: '首页', iconPath: '/static/home.png' },
        { text: '发现', iconPath: '/static/discover.png' },
        { text: '消息', iconPath: '/static/message.png', special: true }, // 中间项
        { text: '我的', iconPath: '/static/profile.png' },
      ]
    };
  },
  methods: {
    switchTab(index) {
      this.currentIndex = index;
      // 触发切换Tab事件，具体实现根据项目需求调整
      this.$emit('switch', index);
    }
  }
};
</script>

<style scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  border-top: 1px solid #eee;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tab-icon {
  width: 24px;
  height: 24px;
}
.tab-text {
  margin-top: 2px;
  font-size: 12px;
}
.tab-item.active .tab-icon {
  color: #ff0000; /* 激活状态的图标颜色 */
}
.tab-item.active {
  transform: translateY(-10px); /* 中间项突起效果 */
}
</style>

在这个示例中，我们通过transform: translateY(-10px)属性实现了中间Tab项的突起效果。注意，这里我们直接在.tab-item.active样式中添加了transform属性，但由于我们希望只有中间的Tab项突起，因此在实际项目中，可能需要通过额外的逻辑或条件判断来动态添加该样式。

此外，switchTab方法用于处理Tab项的点击事件，并触发自定义的switch事件，以便父组件处理具体的页面切换逻辑。

请根据项目的具体需求调整上述代码，比如动态获取Tab项列表、处理图标的选中状态等。

回到顶部