uniapp 隐藏标题栏
时间: 2023-11-02 15:06:16 浏览: 126
uniapp关于支付宝小程序或钉钉小程序标题栏自定义.txt
5星 · 资源好评率100%
在uniapp中隐藏标题栏需要在`pages.json`中将该页面原有的标题栏目进行隐藏,具体代码如下:
```
"path": "yourPagePath",
"style": {
"navigationStyle": "custom",
"navigationBarTextStyle": "white",
"app-plus": {
"titleNView": false
}
}
```
其中,`yourPagePath`为你的页面路径。在`style`中,设置`navigationStyle`为`custom`,表示使用自定义导航栏;`navigationBarTextStyle`为`white`,表示导航栏文字颜色为白色;`app-plus`中的`titleNView`设置为`false`,表示隐藏原有的标题栏。
另外,如果需要在弹出层时隐藏自定义标题栏,可以在标题栏中添加`v-show="titleShow"`来进行显示隐藏的控制。具体代码示例如下:
```
<template>
<view>
<view class="title-bar" v-show="titleShow">
<!-- 标题栏内容 -->
</view>
<view class="popup">
<!-- 弹出层内容 -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
titleShow: true,
}
},
methods: {
// 触发弹出层打开
openPopup() {
this.$refs.popup.open('bottom')
// 隐藏标题栏
this.titleShow = false
},
// 返回上一页
back() {
uni.navigateBack({ delta: 1 })
},
// 点击遮罩层
maskClick() {
// 显示标题栏
this.titleShow = true
}
}
}
</script>
```
阅读全文