uniapp小程序获取右上角胶囊位置信息

文章目录


导文

uniapp小程序获取右上角胶囊位置信息

使用uni.getMenuButtonBoundingClientRect();方法实现

js 复制代码
<script>
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	export default {
		data() {
			return {
				menuButtonInfo: menuButtonInfo, //右侧胶囊详细信息
			}
		},
	onLoad() {
		// this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		// console.log('onLoad',uni.getMenuButtonBoundingClientRect());
	},
	onReady() {
		console.log('onReady');
		console.log('onReady',uni.getMenuButtonBoundingClientRect());
	},
		methods: {
 
		}
	}
</script>

完整案例

html 复制代码
<template>
	<view class="checkIn">

		<view class="checkIn-date" :style="{ padding: capsulePadding() }">
			<view class="checkIn-nav" :style="{ height: capsuleHeight() }">
				<uni-icons type="plus-filled" size="30" color="#ffffff"></uni-icons>
			</view>
			<view class="checkIn-data-main"></view>
		</view>
		<view class="checkIn-main">
			<uni-card title="标题文字" thumbnail="" extra="额外信息" note="Tips">
				内容主体,可自定义内容及样式
			</uni-card>
		</view>
	</view>
</template>

<script>

export default {
	components: {

	},
	data() {
		return {
		}
	},
	onLoad() {
	},
	onReady() {
		console.log('onReady');
	},
	methods: {
		// 获取胶囊高度
		capsuleHeight() {
			if (uni?.getMenuButtonBoundingClientRect()) {
				return `${uni.getMenuButtonBoundingClientRect().height + uni.getMenuButtonBoundingClientRect().top * 2}px`;
			} else {
				return `100px`;
			}
		},
		// 获取侧边宽度
		capsulePadding() {
			if (uni?.getMenuButtonBoundingClientRect()) {
				const res = uni.getSystemInfoSync().windowWidth;
				return `0px ${res - uni.getMenuButtonBoundingClientRect().right}px`;
			} else {
				return `10px`;
			}
		}
	}
}
</script>

<style lang="scss">
.checkIn {
	.checkIn-date {
		width: 100%;
		height: 200px;
		background-image: url('../../static/checkIn/top-back.png');
	}

	.checkIn-nav {
		width: 100%;
		height: 148px;
		display: flex;
		align-items: center;
	}
}
</style>

隐藏默认导航栏:

全局隐藏

在你的页面 pages.json 配置中,为相应的页面设置 navigationStylecustom,这将隐藏默认的导航栏。

json 复制代码
  	"globalStyle": {
		"navigationStyle": "custom"
	},

当前页面隐藏

json 复制代码
   {
     "pages": [
       {
         "path": "pages/index/index",
         "style": {
           "navigationStyle": "custom"
         }
       },
       // ... 其他页面配置
     ]
   }

您好,我是肥晨。

欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

相关推荐
浩星10 小时前
uniapp运行鸿蒙报错整理
uni-app
游戏开发爱好者811 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang12 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金14 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq14 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷14 小时前
微信小程序全局数据共享
微信小程序·小程序
阿眠17 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184119 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
初出茅庐的21 小时前
uniapp - AI 聊天中的md组件
前端·vue.js·uni-app
于慨1 天前
uniapp用webview导入本地网页,ios端打开页面空白问题
uni-app