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”

### 关于微信小程序右上角按钮的功能与自定义方法 #### 解决胶囊菜单覆盖问题 对于UniApp开发的微信小程序而言,当遇到右上角胶囊菜单被其他UI元素遮挡的情况时,可以通过调整布局方式来解决问题。具体来说,在设计界面时应确保不会有任何固定定位或其他类型的视图阻挡住该区域[^1]。 #### 实现悬浮式的自定义分享按钮 为了创建一个不影响原有胶囊位置的同时提供额外交互选项(如点击后触发分享行为)的控件,可以采用相对定位加绝对定位的方式构建容器,并使内部不可见按钮占据整个父级空间从而响应触摸事件。通过这种方式既保留了默认功能又增加了新的操作入口[^2]: ```html <view class="tool"> <text>微信好友</text> <button data-name="shareBtn" open-type="share" class="share"></button> </view> ``` ```css .tool { position: relative; } .share { position: absolute; left: 0; right: 0; bottom: 0; top: 0; opacity: 0; } ``` #### 修改特定页面上的胶囊样式 针对希望改变个别页面顶部导航条内图标外观的需求,由于官方API `wx.setNavigationBarColor` 对于完全定制化的场景支持有限,因此建议切换回标准模式下的导航栏配置以实现预期视觉效果。这意味着要暂时移除任何有关自定义绘制逻辑的部分并依赖框架本身的渲染机制完成适配工作[^3]。 #### 添加个性化返回按键 如果项目中有必要替换掉系统提供的“左滑关闭”或“箭头指向左侧”的图形,则可以根据实际业务需求编写相应的小部件代码片段用于替代原生表现形式。这通常涉及到对现有模板文件做出适当修改以便插入新组件实例[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值