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

诺米 • 2022年4月5日 am11:46 • vue, 公众号 • 阅读 8871

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

第一步：隐藏头部

首先需要在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>

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

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

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

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

相关推荐

发表评论