uniapp如何去掉顶部返回按钮

1. 隐藏默认返回按钮

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

1	{<br>  "pages": [<br>    {<br>      "path": "pages/index/index",<br>      "style": {<br>        "navigationStyle": "custom"<br>      }<br>    }<br>  ]<br>}<br>

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

2. 自定义导航栏

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

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

1

<template><br>  <div><br>    <div><br>      <img src="../../static/img/back.png" alt="" @click="back"><br>    </div><br>    <div>{{title}}</div><br>  </div><br></template><br><br><script><br>  export default {<br>    data() {<br>      return {<br>        title: '' // 标题<br>      }<br>    },<br>    methods:{<br>      back() {<br>        uni.navigateBack() // 返回上一页<br>      }<br>    }<br>  }<br></script><br><br><style><br>  .navbar {<br>    height: 50px;<br>    background-color: #ffffff;<br>    display: flex;<br>    align-items: center;<br>    position: fixed;<br>    z-index: 999;<br>    top: 0;<br>    left: 0;<br>    right: 0;<br><br>    .back {<br>      display: flex;<br>      align-items: center;<br>      padding-left: 10px;<br>      img {<br>        width: 20px;<br>      }<br>    }<br><br>    .title {<br>      flex: 1;<br>      text-align: center;<br>      font-size: 18px;<br>      font-weight: bold;<br>    }<br>  }<br></style><br>

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

1

<template><br>  <div><br>    <custom-navbar title="首页"></custom-navbar><br>  </div><br></template><br><br><script><br>  import CustomNavbar from '@/components/custom-navbar.vue' // 引入组件<br><br>  export default {<br>    components: {<br>      CustomNavbar<br>    }<br>  }<br></script><br><br><style><br>  .index {<br>    padding-top: 50px;<br>  }<br></style><br>

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