uni-app 小程序底部导航凸起点击中间的跳转二级页面

在处理 uni-app 小程序底部导航凸起并点击中间按钮跳转到二级页面的问题时，我们需要进行以下步骤：

配置底部导航：首先，在 pages.json 文件中配置底部导航栏。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/logs/logs",
      "style": {
        "navigationBarTitleText": "日志"
      }
    },
    {
      "path": "pages/center/center",
      "style": {
        "navigationBarTitleText": "个人中心"
      }
    },
    {
      "path": "pages/second/second", // 假设这是二级页面
      "style": {
        "navigationBarTitleText": "二级页面"
      }
    }
  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/icon_home.png",
        "selectedIconPath": "static/icon_home_active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "static/icon_logs.png",
        "selectedIconPath": "static/icon_logs_active.png"
      },
      {
        "pagePath": "pages/center/center",
        "text": "个人中心",
        "iconPath": "static/icon_center.png",
        "selectedIconPath": "static/icon_center_active.png"
      }
    ]
  }
}

处理点击事件：在 pages/center/center.vue 文件中处理点击事件，跳转到二级页面。

<template>
  <view class="container">
    <button @click="navigateToSecondPage">跳转到二级页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToSecondPage() {
      uni.navigateTo({
        url: '/pages/second/second'
      });
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
button {
  padding: 10px 20px;
  background-color: #3cc51f;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

二级页面布局：确保 pages/second/second.vue 页面存在并有基本布局。

<template>
  <view class="container">
    <text>这是二级页面</text>
  </view>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

以上代码展示了如何在 uni-app 中配置底部导航栏，并在中间的个人中心页面添加一个按钮，点击该按钮后跳转到二级页面。这种方法确保了底部导航栏的正常显示和点击事件的正确处理。

uni-app 小程序底部导航凸起 点击中间的跳转二级页面

uni-app 小程序底部导航凸起点击中间的跳转二级页面