【uni-app】对齐胶囊容器组件

代码碎片

html 复制代码
<template>
  <div>
    <view :style="{ height: `${statusBarHeight}px` }"></view>
    <view
      class=""
      :style="{
        height: `${menuButtonHeight + menuButtonPadding * 2}px`,
        width: `${menuButtonInfo.left}px`,
      }"
    >
      <slot name="left"></slot>
      <slot name="mid"></slot>
    </view>
  </div>
</template>

<script lang="ts" setup>
const menuButtonInfo = uni.getMenuButtonBoundingClientRect() // 胶囊按钮信息
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 系统信息里的状态栏高度

console.log('menuButtonInfo', menuButtonInfo)
console.log('statusBarHeight', statusBarHeight)
const menuButtonPadding = menuButtonInfo.top - statusBarHeight
const menuButtonHeight = menuButtonInfo.height
</script>

<style lang="scss" scoped>
//
</style>
相关推荐
Frankabcdefgh2 分钟前
初中级前端面试全攻略:自我介绍模板、项目讲解套路与常见问答
前端·面试·职场和发展
2401_878454533 分钟前
thymeleaf的使用和小结
前端·javascript·学习
brzhang11 分钟前
宝藏发现:Sim Studio,一款让AI工作流搭建变简单的开源利器
前端·后端·github
2301_7994049112 分钟前
AJAX 介绍
前端·ajax·axios
拖孩18 分钟前
【Nova UI】十三、打造组件库之按钮组件(中):样式雕琢全攻略
前端·javascript·vue.js
好_快1 小时前
Lodash源码阅读-sortedUniqBy
前端·javascript·源码阅读
小流苏生1 小时前
这只是一罐过期了七年的红牛……
前端·人工智能·程序员
不老刘1 小时前
Uni-app网络请求AES加密解密实现
网络·uni-app
洪洪呀1 小时前
uni-app vue3 实现72小时倒计时功能
vue.js·uni-app
风清云淡_A1 小时前
【angular19】入门基础教程(一):项目的搭建与启动
前端·angular.js