uni-app 刘海屏自定义导航栏uni-nav-bar状态栏被穿透
uni-app 刘海屏自定义导航栏uni-nav-bar状态栏被穿透
产品分类
uniapp/App
示例代码
<template>
<view class="content">
<view class="status_bar"></view>
<!-- 导航栏 -->
<view
class="navbar"
:class="{ 'el-hidden': !showHeader }"
>
<!-- 禁止滚动穿透 不占位 -->
<page-meta
:page-style="'overflow:' + (isLockRollThrough ? 'hidden' : 'visible')"
></page-meta>
<uni-nav-bar
left-icon="arrow-left"
fixed
:border="false"
:title="title"
:height="50"
@clickLeft="handleClickLeft"
/>
</view>
<view
class="header"
:class="{ 'el-hidden': !showHeader }"
>
<text class="city-management">城市管理</text>
</view>
<view class="search">
<uni-search-bar
:class="{ uniSearchBarTop: showHeader }"
radius="20"
:placeholder="searcHPlaceholder"
clearButton="auto"
cancelButton="auto"
@focus="handleClickSerchBar"
@cancel="handleCancelSearch"
/>
</view>
<view>
<scroll-view
style="height: 100vh"
scroll-y="true"
>
<view class="uni-padding-wrap uni-common-mt">
<button type="primary">页面主操作 Normal</button>
<button
type="primary"
loading="true"
>
页面主操作 Loading
</button>
<button
type="primary"
disabled="true"
>
页面主操作 Disabled
</button>
<button type="default">页面次要操作 Normal</button>
<button
type="default"
disabled="true"
>
页面次要操作 Disabled
</button>
<button type="warn">警告类操作 Normal</button>
<button
type="warn"
disabled="true"
>
警告类操作 Disabled
</button>
<view class="button-sp-area">
<button
type="primary"
plain="true"
>
按钮
</button>
<button
type="primary"
disabled="true"
plain="true"
>
不可点击的按钮
</button>
<button
type="default"
plain="true"
>
按钮
</button>
<button
type="default"
disabled="true"
plain="true"
>
按钮
</button>
<button
class="mini-btn"
type="primary"
size="mini"
>
按钮
</button>
<button
class="mini-btn"
type="default"
size="mini"
>
按钮
</button>
<button
class="mini-btn"
type="warn"
size="mini"
>
按钮
</button>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: "",
showHeader: true,
uniSearchBarTop: "uni-mt-10", //
isLockRollThrough: false,
searcHPlaceholder: "搜索位置",
};
},
methods: {
handleClickSerchBar() {
this.showHeader = false;
this.isLockRollThrough = true;
this.searcHPlaceholder = " ";
uni.showToast({
title: "点击了搜索框",
icon: "none",
image: "",
duration: 1500,
mask: false,
success: (result) => {},
fail: () => {},
complete: () => {},
});
},
/** 取消搜索 */
handleCancelSearch() {
this.showHeader = false;
this.searcHPlaceholder = "搜索位置";
this.isLockRollThrough = false;
uni.redirectTo({
url: "/pages/city/city-management/city-management",
});
},
handleClickLeft() {
uni.navigateTo({
url: "/pages/index/index",
animationType: "fade-in",
animationDuration: 300,
});
},
/** 更新标题 */
updateTitle(newTitle) {
this.title = newTitle;
},
},
onReady() {},
/** 监听页面滚动 */
onPageScroll: function (e) {
if (e.scrollTop > 100) {
this.updateTitle("城市管理");
} else {
this.updateTitle("");
}
},
};
</script>
<style>
page {
background-color: #fff !important;
}
</style>
<style lang="scss">
.el-hidden {
display: none !important;
}
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: #fff;
}
// 图标样式覆盖
.uniui-arrow-left {
font-size: 50rpx !important;
}
.header {
margin: 10rpx 0 40rpx 20rpx;
font-size: 28px;
font-weight: 300;
}
</style>
操作步骤
无效
预期结果
状态栏不被穿透
实际结果
状态栏被穿透
bug描述
<template>
<view class="content">
<view class="status_bar"></view>
<!-- 导航栏 -->
<view
class="navbar"
:class="{ 'el-hidden': !showHeader }"
>
<!-- 禁止滚动穿透 不占位 -->
<page-meta
:page-style="'overflow:' + (isLockRollThrough ? 'hidden' : 'visible')"
></page-meta>
<uni-nav-bar
left-icon="arrow-left"
fixed
:border="false"
:title="title"
:height="50"
@clickLeft="handleClickLeft"
/>
</view>
<view
class="header"
:class="{ 'el-hidden': !showHeader }"
>
<text class="city-management">城市管理</text>
</view>
<view class="search">
<uni-search-bar
:class="{ uniSearchBarTop: showHeader }"
radius="20"
:placeholder="searcHPlaceholder"
clearButton="auto"
cancelButton="auto"
@focus="handleClickSerchBar"
@cancel="handleCancelSearch"
/>
</view>
<view>
<scroll-view
style="height: 100vh"
scroll-y="true"
>
<view class="uni-padding-wrap uni-common-mt">
<button type="primary">页面主操作 Normal</button>
<button
type="primary"
loading="true"
>
页面主操作 Loading
</button>
<button
type="primary"
disabled="true"
>
页面主操作 Disabled
</button>
<button type="default">页面次要操作 Normal</button>
<button
type="default"
disabled="true"
>
页面次要操作 Disabled
</button>
<button type="warn">警告类操作 Normal</button>
<button
type="warn"
disabled="true"
>
警告类操作 Disabled
</button>
<view class="button-sp-area">
<button
type="primary"
plain="true"
>
按钮
</button>
<button
type="primary"
disabled="true"
plain="true"
>
不可点击的按钮
</button>
<button
type="default"
plain="true"
>
按钮
</button>
<button
type="default"
disabled="true"
plain="true"
>
按钮
</button>
<button
class="mini-btn"
type="primary"
size="mini"
>
按钮
</button>
<button
class="mini-btn"
type="default"
size="mini"
>
按钮
</button>
<button
class="mini-btn"
type="warn"
size="mini"
>
按钮
</button>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: "",
showHeader: true,
uniSearchBarTop: "uni-mt-10", //
isLockRollThrough: false,
searcHPlaceholder: "搜索位置",
};
},
methods: {
handleClickSerchBar() {
this.showHeader = false;
this.isLockRollThrough = true;
this.searcHPlaceholder = " ";
uni.showToast({
title: "点击了搜索框",
icon: "none",
image: "",
duration: 1500,
mask: false,
success: (result) => {},
fail: () => {},
complete: () => {},
});
},
/** 取消搜索 */
handleCancelSearch() {
this.showHeader = false;
this.searcHPlaceholder = "搜索位置";
this.isLockRollThrough = false;
uni.redirectTo({
url: "/pages/city/city-management/city-management",
});
},
handleClickLeft() {
uni.navigateTo({
url: "/pages/index/index",
animationType: "fade-in",
animationDuration: 300,
});
},
/** 更新标题 */
updateTitle(newTitle) {
this.title = newTitle;
},
},
onReady() {},
/** 监听页面滚动 */
onPageScroll: function (e) {
if (e.scrollTop > 100) {
this.updateTitle("城市管理");
} else {
this.updateTitle("");
}
},
};
</script>
<style>
page {
background-color: #fff !important;
}
</style>
<style lang="scss">
.el-hidden {
display: none !important;
}
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: #fff;
}
// 图标样式覆盖
.uniui-arrow-left {
font-size: 50rpx !important;
}
.header {
margin: 10rpx 0 40rpx 20rpx;
font-size: 28px;
font-weight: 300;
}
</style>
更多关于uni-app 刘海屏自定义导航栏uni-nav-bar状态栏被穿透的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于uni-app 刘海屏自定义导航栏uni-nav-bar状态栏被穿透的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在 uni-app 中使用 uni-nav-bar 组件时，可能会遇到刘海屏设备上状态栏被穿透的问题。这是因为默认情况下，uni-nav-bar 并没有自动适配刘海屏设备的状态栏高度，导致内容可能会与状态栏重叠。
要解决这个问题，你可以采取以下几种方法：
1. 使用 uni-nav-bar 的 statusBar 属性
uni-nav-bar 组件提供了一个 statusBar 属性，用于适配状态栏高度。你可以将其设置为 true，这样 uni-nav-bar 会自动调整其顶部间距以适配状态栏。
<template>
<uni-nav-bar :statusBar="true" title="标题"></uni-nav-bar>
</template>
2. 手动设置 padding-top
如果你需要更精确的控制，可以手动设置 padding-top 来适配状态栏的高度。uni-app 提供了一个全局变量 statusBarHeight，可以通过 uni.getSystemInfoSync() 获取。
<template>
<view :style="{ paddingTop: statusBarHeight + 'px' }">
<uni-nav-bar title="标题"></uni-nav-bar>
</view>
</template>
<script>
export default {
data() {
return {
statusBarHeight: 0
};
},
mounted() {
const systemInfo = uni.getSystemInfoSync();
this.statusBarHeight = systemInfo.statusBarHeight;
}
};
</script>
3. 使用 uni-page-head 组件
uni-page-head 是 uni-app 提供的另一个导航栏组件，它已经内置了对刘海屏的适配，你可以直接使用它。
<template>
<uni-page-head title="标题"></uni-page-head>
</template>
4. 自定义导航栏
如果你需要完全自定义导航栏，可以手动计算状态栏高度并设置样式。
<template>
<view :style="{ paddingTop: statusBarHeight + 'px' }">
<!-- 自定义导航栏内容 -->
</view>
</template>
<script>
export default {
data() {
return {
statusBarHeight: 0
};
},
mounted() {
const systemInfo = uni.getSystemInfoSync();
this.statusBarHeight = systemInfo.statusBarHeight;
}
};
</script>
5. 使用 uni-nav-bar 的 fixed 属性
如果你希望导航栏固定在页面顶部，可以使用 fixed 属性，并确保内容区域不会被导航栏遮挡。
<template>
<uni-nav-bar :fixed="true" title="标题"></uni-nav-bar>
<view style="padding-top: 44px;">
<!-- 页面内容 -->
</view>
</template>
6. 使用 uni-nav-bar 的 height 属性
你可以手动设置 uni-nav-bar 的高度，确保其包含状态栏的高度。
<template>
<uni-nav-bar :height="statusBarHeight + 44" title="标题"></uni-nav-bar>
</template>
<script>
export default {
data() {
return {
statusBarHeight: 0
};
},
mounted() {
const systemInfo = uni.getSystemInfoSync();
this.statusBarHeight = systemInfo.statusBarHeight;
}
};
</script>