Shikong/uni-app-wx-study
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

状态栏调整

Browse Source
This commit is contained in:
shikong 2024-10-17 20:20:17 +08:00
parent 77ff420f02
commit 376480c729
Signed by: Shikong
GPG Key ID: BD85FF18B373C341
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/index/components/nav-bar/index.vue
View File

@ -16,12 +16,12 @@ const ctx = reactive({
let capsule = uni.getMenuButtonBoundingClientRect(); // 小程序右上角胶囊信息 let capsule = uni.getMenuButtonBoundingClientRect(); // 小程序右上角胶囊信息
let system = uni.getSystemInfoSync(); // 获取设备信息 let system = uni.getSystemInfoSync(); // 获取设备信息
let {safeAreaInsets} = system let {safeAreaInsets} = system
console.log(system, safeAreaInsets)
ctx.safeAreaInsets = safeAreaInsets
ctx.safeAreaInsets = safeAreaInsets
ctx.navHeight = system.statusBarHeight + capsule.height; // 导航栏的高度 ctx.navHeight = system.statusBarHeight + capsule.height; // 导航栏的高度
ctx.statusBarHeight = system.statusBarHeight // 与顶部的距离 ctx.statusBarHeight = system.statusBarHeight // 与顶部的距离
ctx.capsuleWidth = capsule.width; // 胶囊按钮与右侧的距离 ctx.capsuleWidth = capsule.width; // 胶囊按钮与右侧的距离
console.log(system, safeAreaInsets)
function searchKeyword() { function searchKeyword() {
console.log(ctx.search.keyword) console.log(ctx.search.keyword)
@ -35,7 +35,7 @@ function searchKeyword() {
</script> </script>
<template> <template>
<view :style="{paddingTop: ctx.safeAreaInsets.top + 'px', paddingRight: ctx.capsuleWidth + 'px'}" style="background: #1296db"> <view :style="{paddingTop: (ctx.safeAreaInsets.top || ctx.statusBarHeight) + 'px', paddingRight: ctx.capsuleWidth + 'px'}" style="background: #1296db">
<uni-search-bar v-model="ctx.search.keyword" bgColor="#EEEEEE" placeholder="请输入搜索内容" @confirm="searchKeyword" cancelButton="none"></uni-search-bar> <uni-search-bar v-model="ctx.search.keyword" bgColor="#EEEEEE" placeholder="请输入搜索内容" @confirm="searchKeyword" cancelButton="none"></uni-search-bar>
</view> </view>
</template> </template>