uni-app 小程序项目底部导航栏按钮凸起

uni-app 小程序项目底部导航栏按钮凸起

由于提供的HTML内容中并未包含除日期以外的其他具体信息，因此转换后的Markdown文档仅保留了HTML结构中的空`<article>`标签。关于开发环境、版本号及项目创建方式的信息未在所提供的内容中找到，故未生成相关表格。


<article class="markdown-body">
</article>
3 回复

8年原生技术开发，熟练安卓、IOS各类uniapp混合插件开发，联系QQ: 1328559667

更多关于uni-app 小程序项目底部导航栏按钮凸起的实战教程也可以访问 https://www.itying.com/category-93-b0.html


38年原生技术开发，熟练安卓、IOS各类uniapp混合插件开发，联系QQ: 1328559667

在uni-app中，实现小程序项目底部导航栏按钮凸起效果，可以通过自定义底部导航栏并使用CSS样式来实现。以下是一个示例代码，展示如何自定义底部导航栏并设置按钮凸起效果。

1. 修改pages.json

首先，在pages.json中配置页面路径，并关闭uni-app默认的tabBar。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    }
    // 其他页面配置
  ],
  "tabBar": {
    "list": [], // 清空默认的tabBar
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "height": "50px"
  }
}

2. 创建自定义底部导航栏组件

在components目录下创建一个名为CustomTabBar.vue的组件。

<template>
  <view class="tab-bar">
    <view class="tab-bar-item" @click="navigateTo('/pages/index/index')" :class="{active: currentPage === 'index'}">首页</view>
    <view class="tab-bar-item" @click="navigateTo('/pages/about/about')" :class="{active: currentPage === 'about'}">关于</view>
    <!-- 添加更多tab项 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentPage: ''
    };
  },
  methods: {
    navigateTo(url) {
      uni.switchTab({
        url
      });
      this.currentPage = url.split('/').pop().split('/')[0];
    }
  },
  onShow() {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    this.currentPage = currentPage.route;
  }
};
</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 #ddd;
}
.tab-bar-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
}
.tab-bar-item.active {
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 凸起效果 */
  background-color: #f8f8f8;
}
</style>

3. 在页面中使用自定义底部导航栏组件

在每个需要显示底部导航栏的页面中引入并使用CustomTabBar组件。

<template>
  <view>
    <!-- 页面内容 -->
    <CustomTabBar />
  </view>
</template>

<script>
import CustomTabBar from '@/components/CustomTabBar.vue';

export default {
  components: {
    CustomTabBar
  }
};
</script>

通过上述步骤，你可以在uni-app中实现自定义的底部导航栏，并设置按钮凸起效果。

回到顶部