2023.03.20

金毛好文明

已于 2023-04-21 14:17:03 修改

阅读量557

点赞数

CC 4.0 BY-SA版权

分类专栏：踩坑之旅文章标签： uni-app

于 2023-03-20 17:14:29 首次发布

本文链接：https://blog.csdn.net/kwroi/article/details/129671749

踩坑之旅专栏收录该内容

10 篇文章

订阅专栏

方法一

应用一：uniapp顶部导航栏左上角返回按钮，点击，返回并刷新上一个页面

(也可以自定义其它按钮)
uniapp官网

1. 去除默认返回按钮，自定义返回按钮

请添加图片描述

pages.json

{
  "path": "/xxx",
  "style": {
	"navigationBarTitleText": "xxxx",
	"enablePullDownRefresh": false,
	 "app-plus":{
		"titleNView":{
		// H5端需要在App.vue中设置style才能隐藏默认的按钮
			"autoBackButton":false,
			"buttons":[
				{
					"type":"back",
					"color":"#FFF",
					"fontSize":"28px",
					"float":"left"
				}
			]
		}
	}
  }
},

App.vue

<style>
uni-page[data-page='pages/xxx/xxxx/xx'] .uni-page-head-hd > .uni-page-head-btn {
  display: none;
}
</style>

注意点：

可能会陷入永动机！！！

2. 在页面中添加响应方法

xxx.vue

	data() {
		// ...
	},
	onNavigationBarButtonTap(e) {
		uni.navigateTo({
			url:'../xxx/list'
		})
	 },
	 onLoad() {
	 // ...
	 },

应用二：登录页，去除整个顶部导航栏

	{
	  "path": "pages/login/login",
	  "style": {
	  // 设置属性值为custom即可
		"navigationStyle": "custom"
	  }
	},

方法二

监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；
详解

 onBackPress(options) {  
     if (options.from === 'navigateBack') {  
         return false;  
     }  
     uni.navigateTo({
     	url:''
     }) 
     return true;  
 },