uniapp 设置安全区域

javascript 复制代码
<!-- 获取安全区域 -->
<script setup lang="ts">
import { computed, ref } from 'vue'

let systemType = ref('1')
// #ifdef APP-PLUS || H5  || APP-PLUS-NVUE
systemType.value = '1'
const { safeAreaInsets } = uni.getSystemInfoSync()
console.log(safeAreaInsets, 'safeAreaInsets')
const prop = defineProps({
  title: {
    type: String,
    default: '消息',
  },
})
// #endif

// #ifdef MP-WEIXIN
systemType.value = '2'
const navbarHeight = ref(0)
//计算刘海状态栏
navbarHeight.value = uni.getSystemInfoSync().statusBarHeight || 0
//计算胶囊区域的高度
let { top, height } = uni.getMenuButtonBoundingClientRect()
const titleBarHeight = computed(() => {
  return (top - navbarHeight.value) * 2 + height
})
// #endif
</script>

<template>
  <view v-if="systemType == '1'" class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'rpx' }">
    <view class="search">{{ title }}</view>
  </view>
  <view v-if="systemType == '2'">
    <view class="fill" :style="{ height: navbarHeight + 'px' }"></view>
    <view class="title" :style="{ height: titleBarHeight + 'px' }"> 消息 </view>
  </view>
</template>

<style lang="scss">
.navbar {
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
  // .leftBack {
  //   position: absolute;
  //  top: 200rpx;
  // }
  .search {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0rpx 10rpx 0 26rpx;
    height: 64rpx;
    line-break: 64rpx;
    //ui标记距离上面22rpx
    margin: 44rpx 20rpx 0 20rpx;
    color: #1f1f1f;
    font-weight: 600;
    font-size: 28rpx;
    border-radius: 32rpx;
  }
}
.fill {
  width: 100%;
}
.title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

uniapp 设置安全区域以及导航栏和胶囊对齐 要注意app没有胶囊没法获取 要另外写样式(已完善)

ps:真就是每个公司总有那么几个表现狗 真他妈的恶心 得拓展一下自己的知识宽度 找下家了

相关推荐
测试界的酸菜鱼10 分钟前
使用 Python + Vue 搭建自动化平台的核心要点
vue.js·python·自动化
多客软件佳佳18 分钟前
校园交友系统的设计与实现(开源版+三端交付+搭建+售后)
小程序·前端框架·uni-app·开源·php·交友
黑色叉腰丶大魔王21 分钟前
《Javascript 网页设计案例分享》
javascript
前端Hardy25 分钟前
HTML&CSS 打造的酷炫菜单选项卡
前端·javascript·css·html·css3
M木31 分钟前
前端如何实现文件的在线预览?
前端·vue.js
阿征学IT33 分钟前
vue计算属性 初步使用案例
前端·javascript·vue.js
Qhumaing33 分钟前
html文本元素
前端·html
林太白35 分钟前
❤React-React 组件通讯
前端·javascript·react.js
YUJIANYUE36 分钟前
原生html+js输入框下拉多选带关闭模块完整案例
javascript·css·html
zhouang77037739 分钟前
uniapp+vue2 设置全局变量和全局方法 (兼容h5/微信小程序)
微信小程序·小程序·uni-app