uniapp之微信小程序标题对其右上角按钮胶囊
直接上图
<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>
page.json记得把\"navigationStyle\": “custom”