【uniapp】解决autoBackButton不生效和onNavigationBarButtonTap不起作用问题:

文章目录

            • 1.需求:
            • 2.解决:
            • 3.问题:
            • 4.解决方法二:


1.需求:
1.隐藏原生的返回按钮=>由于自带的方法点击时不生效

2.点击离开事件

【uniapp】解决autoBackButton不生效和onNavigationBarButtonTap不起作用问题:_第1张图片

2.解决:

【1】pages.json

"style": {
	"app-plus": {//这个要在上面
		"titleNView": {
			"autoBackButton": "false",
			"buttons": [{
				"text": "离开",
				"float": "right",
				"fontSize": "28upx",
				"fontWeight": "normal",
				"color": "rgb(0, 0, 0)"
			}]
		}
	},
	"navigationBarTitleText": "在线考试内容"
}

【2】index.vue

created(){
	document.querySelector('.uni-page-head-hd').style.display = 'none'
},
// 监听原生标题栏按钮点击事件,参数为Object
onNavigationBarButtonTap: function(e) {
	const that = this
	uni.showModal({
		title: '提示',
		content: '考试还没有结束,是否确定离开(离开会自动保存)?',
		success: function(res) {
			if (res.confirm) {
				that.submitPapers()
				uni.redirectTo({
					url: '/pages/index/index'
				});
			} else if (res.cancel) {
				console.log('拒绝离开考试页面');
			}
		}
	});
},
3.问题:
1.返回按钮的显示 autoBackButton不生效
2.onNavigationBarButtonTap不起作用
4.解决方法二:

在pages.json将要隐藏返回箭头的页面放在最上面(缺点:登录页面就要隐藏)

你可能感兴趣的:(小程序端,uni-app,vue.js,javascript)