uniapp如何去掉顶部返回按钮

1. 隐藏默认返回按钮

在uni-app中，我们可以通过设置navigationStyle来隐藏默认的导航栏。在pages.json中：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom"
      }
    }
  ]
}

这样就可以隐藏默认的导航栏了。但是这样的话，我们就需要自己写一个自定义的导航栏组件，并且把所有页面都改成使用自定义导航栏。

2. 自定义导航栏

为了实现自定义的导航栏，我们需要新建一个组件。命名为custom-navbar。

在该组件的样式中，我们可以设置背景色、高度、位置等。在组件中添加左边的返回按钮和标题。

<template>
  <div>
    <div>
      <img src="../../static/img/back.png" alt="" @click="back">
    </div>
    <div>{{title}}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: '' // 标题
      }
    },
    methods:{
      back() {
        uni.navigateBack() // 返回上一页
      }
    }
  }
</script>

<style>
  .navbar {
    height: 50px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;

    .back {
      display: flex;
      align-items: center;
      padding-left: 10px;
      img {
        width: 20px;
      }
    }

    .title {
      flex: 1;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
    }
  }
</style>

在需要使用自定义导航栏的页面，引入custom-navbar组件。

<template>
  <div>
    <custom-navbar title="首页"></custom-navbar>
  </div>
</template>

<script>
  import CustomNavbar from '@/components/custom-navbar.vue' // 引入组件

  export default {
    components: {
      CustomNavbar
    }
  }
</script>

<style>
  .index {
    padding-top: 50px;
  }
</style>

最后的效果是自定义的导航栏只有一个标题没有返回按钮。