需求背景
实现一个能遮住原生 tabbar
和 navbar
的全局操作框
原理
使用一个透明的页面来模拟弹窗,这个页面可以遮住原生 tabbar
和 navbar
页面配置
{
"path" : "pages/shootAtWill/shootAtWill",
"style" :
{
"navigationBarTitleText" : "随手拍",
"navigationStyle": "custom",
"backgroundColor": "transparent",
"app-plus": {
"animationType": "slide-in-bottom", // 我这边需求是从底部弹出
"background": "transparent",
"popGesture": "none",
"bounce": "none",
"titleNView": false,
"animationDuration": 150
}
}
}
页面样式
<style>
page {
/* 必须的样式,这是页面背景色为透明色 */
background: transparent;
}
</style>
<style lang="scss" scoped>
// 写你页面的其他样式
</style>
这样的话就新建成功了一个透明的页面,那么这个页面上的东西都可以遮挡住原生 tabbar
和 navbar
我还加了遮罩:
<template>
<view>
<view class="modal" style="z-index: -1"></view>
</view>
</template>
<style lang="scss" scoped>
.modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
效果演示
原文链接:https://juejin.cn/post/7317325043541639178 作者:鹏北海