第一步：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屏幕左边滑动关闭当前页面的功能
}
}
}
]
}
第二步：这时候设置了沉浸式透明导航的页面中，返回按钮和标题隐藏了，所以我们需要写一个自定义的导航栏：
pages/index/index.vue
<template>
<view class="uni-seleton">
<view class="back-btn iconfont iconarrow_btn_left" @click="navBack">
<text class="nav-title">标题</text>
</view>
</view>
</template>
export default {
methods: {
// 返回上一页
navBack() {
uni.navigateBack();
}
}
}
<style lang='scss'>
.back-btn {
width: 100%;
position: absolute;
z-index: 999;
padding-top: var(--status-bar-height);
padding-left: 40upx;
padding-right: 40upx;
top: 40upx;
font-size: 40upx;
color: #1E1E1E;
display: flex;
align-items: center;
.nav-title {
width: 590upx;
text-align: center;
}
}
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/4550.html
