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