uniapp左上角返回按钮

在uniapp中，可以使用uni.navigateBack()方法来实现左上角返回按钮的功能。具体步骤如下：

1. 在页面的onLoad方法中，获取当前页面的路由地址：

onLoad() {
  this.route = this.$route.path;
}

2. 在页面的布局中，添加一个返回按钮，并绑定点击事件：

<view class="back-btn" @click="goBack">
  <uni-icons type="back"></uni-icons>
</view>

3. 在页面的methods中，实现goBack方法：

methods: {
  goBack() {
    uni.navigateBack({
      delta: 1, // 返回的页面数，如果是1表示返回上一页，依次类推
      fail: () => {
        uni.reLaunch({
          url: '/pages/index/index' // 如果返回失败，跳转到首页
        })
      }
    })
  }
}

4. 在uni-app的全局样式中，添加样式规则，使返回按钮居左：

.back-btn {
  position: absolute;
  left: 0;
}

相关问题

uniapp自定义左上角返回按钮

以下是uniapp自定义左上角返回按钮的方法：

1.在App.vue中添加以下代码：

<template>
  <view>
    <navigation-bar :title="title" :left-text="leftText" :background-color="backgroundColor" :fixed="fixed" @click-left="onClickLeft"></navigation-bar>
    <router-view></router-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'uni-app',
      leftText: '返回',
      backgroundColor: '#ffffff',
      fixed: true
    }
  },
  methods: {
    onClickLeft() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

2.在需要使用自定义返回按钮的页面中，将navigationBarTitleText改为false，并在navigationBar中添加自定义返回按钮的样式：

<template>
  <view>
    <navigation-bar :title="title" :background-color="backgroundColor" :fixed="fixed" :back-text="backText" :delta="delta" @click-left="onClickLeft" left-icon="back"></navigation-bar>
    <text>这是一个需要自定义返回按钮的页面</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'uni-app',
      backgroundColor: '#ffffff',
      fixed: true,
      backText: '',
      delta: 1
    }
  },
  methods: {
    onClickLeft() {
      uni.navigateBack({
        delta: this.delta
      })
    }
  }
}
</script>

<style>
/* 自定义返回按钮样式 */
.uni-icon.back:before {
  content: "\e6b4";
  font-size: 24px;
  color: #000000;
}
</style>

在这个例子中，我们使用了uni-app提供的navigationBar组件，并在App.vue中定义了默认的navigationBar样式和点击左侧按钮的方法。在需要自定义返回按钮的页面中，我们将navigationBarTitleText改为false，并在navigationBar中添加了自定义返回按钮的样式。同时，我们还定义了点击左侧按钮的方法，使其返回上一页。

uniapp隐藏左上角返回键

要在uni-app中隐藏左上角的返回键，可以按照以下步骤进行操作：

1. 在根目录的pages.json文件中找到需要隐藏返回键的页面，在该页面的style属性下添加以下代码：

   "app-plus": {
     "titleNView": {
       "autoBackButton": false
     }
   }

这样可以通过设置autoBackButton为false来隐藏返回按钮。例如：

   "path": "pages/login/login",
   "style": {
     "navigationBarTitleText": "",
     "app-plus": {
       "titleNView": {
         "autoBackButton": false
       }
     }
   }

2. 在该页面的mounted方法中添加以下代码：

   mounted() {
     var a = document.getElementsByClassName('uni-page-head-hd')[0];
     a.style.display = 'none';
   }

这样可以通过获取页面头部的class为uni-page-head-hd的元素，并将其display属性设置为none来隐藏返回按钮。例如：

   mounted() {
     var a = document.getElementsByClassName('uni-page-head-hd')[0];
     a.style.display = 'none';
   }

通过以上步骤，你可以在uni-app中成功隐藏左上角的返回键。[1][2]