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

直接上图

html 复制代码
<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"

相关推荐
游戏开发爱好者82 小时前
iOS 26 App 查看电池寿命技巧,多工具组合实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone
xiaohe06012 小时前
🚀 拥抱 create-uni,一行命令轻松集成 Uni ECharts!
vue.js·uni-app·echarts
abigale034 小时前
开发实战 - ego商城 - 补充:小程序性能优化
小程序·uniapp·小程序分包
说私域5 小时前
开源AI智能客服、AI智能名片与S2B2C商城小程序融合下的商家客服能力提升策略研究
人工智能·小程序
赣州云智科技的技术铺子5 小时前
【一步步开发AI运动APP】十三、如何进行运动开始前的站位预检,提升用户体验
微信小程序·小程序·云开发·智能小程序
游戏开发爱好者810 小时前
iOS 混淆工具链实战 多工具组合完成 IPA 混淆与加固 无源码混淆
android·ios·小程序·https·uni-app·iphone·webview
2501_9160088916 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·开发语言·ios·小程序·uni-app·iphone·swift
阿金要当大魔王~~16 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发16 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
liweiweili12620 小时前
驾校陪练下单小程序
小程序