1. HTTP3W博客首页
  2. 技术
  3. vue

uniapp隐藏头部并自定义返回按钮

我在编写一个小程序分享页面的时候,需要将背景图铺满整改手机屏幕,因此,需要隐藏掉头部区域,在通过官方示例隐藏成功之后,发现返回上个页面的左边按钮没了,于是经过各种查询,发现个自定义返回按钮的方法得以解决,具体实现步骤如下:

第一步:隐藏头部

首先需要在pages.json文件中配置如下代码:

{
	"pages": [
		{
			"path": "pages/index/index",//我的路由地址
			"style": {
				"navigationBarTitleText": "沉浸式透明导航栏",
				"navigationStyle": "custom", // 取消本页面的导航栏
				"app-plus": {
					"animationType": "fade-in", // 设置fade-in淡入动画,为最合理的动画类型
					"background": "transparent", // 背景透明
					"backgroundColor": "rgba(0,0,0,0)", // 背景透明
					"webviewBGTransparent": true,
					"mask": "none",
					"opacity": 0.9,
					"popGesture": "none" // 关闭IOS屏幕左边滑动关闭当前页面的功能
				}
			}
		}
	]
}

第二步:自定义返回按钮(导航栏)

自定义返回图标,我这里使用的是uniapp官网自带的uni-icons 图标,官网示例:https://ext.dcloud.net.cn/plugin?id=28 

<template>
	<view class="uni-seleton">
		<uni-icons  class="back-btn iconfont iconarrow_btn_left" type="arrowleft"   color="#fff" @click="navBack"/>
	</view>

</template>
methods: {
	// 返回上一页
	navBack() {
		uni.navigateBack();
	}
}
<style scoped lang='scss'>
	.back-btn {
		width: 100%;
		position: absolute;
		z-index: 999;
		padding-top: var(--status-bar-height);
		padding-left: 40upx;
		padding-right: 40upx;
		top: 20upx;
		font-size: 40upx;
		color: #fff;
		display: flex;
		align-items: center;
		.nav-title {
			width: 590upx;
			text-align: center;
		}
	}

</style>

看下我的效果图吧,(●’◡’●)

uniapp隐藏头部并自定义返回按钮

1、原创文章,作者:诺米,如若转载,请注明出处:https://www.http3w.com/archives/684

2、本站内容若有雷同从属巧合,若侵犯了您的权益,请联系本站删除,E-mail: wtao219@qq.com

发表评论

您的电子邮箱地址不会被公开。

联系我们

254007489

在线咨询:点击这里给我发消息

邮件:wtao219@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息