当前位置：首页 > news >正文

uniapp之微信小程序标题对其右上角按钮胶囊

news 2025/7/26 9:50:19

直接上图
在这里插入图片描述

<template><!-- 在模板中使用计算后的值 --><view class="indexPage" :style="{paddingTop: titleTop + 'px'}"><view style="display: flex;align-items: center;justify-content: center;" :style="{height: sBarHeight +'px'}">我是标题栏标题</view></view>
</template><script setup>import {ref,reactive,computed,onMounted} from 'vue'import {onLoad } from '@dcloudio/uni-app'// const sBarHeight = ref(uni.getSystemInfoSync().statusBarHeight)// const titleTop = ref(0)// 响应式变量的声明和数据const titleTop = ref(0);const sBarHeight = ref(0);onLoad(async (options) => {// 获取胶囊按钮位置信息const menuButtonInfo = await uni.getMenuButtonBoundingClientRect();console.log(menuButtonInfo);const { top, height } = menuButtonInfo;//   // 获取系统状态栏高度sBarHeight.value = uni.getSystemInfoSync().statusBarHeight;//   // 计算标题需要偏移的位置titleTop.value = top + (height - sBarHeight.value) / 2;//顶部标题对齐console.log("✈️titleTop", titleTop.value);console.log("✈️sBarHeight ", sBarHeight .value);});
</script>
<style  scoped>
</style>