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"
         }
       },
       // ... 其他页面配置
     ]
   }

您好,我是肥晨。

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

相关推荐
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
2501_915918417 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域8 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷8 小时前
第一个小程序
小程序
春哥的研究所8 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld8 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
不知名It水手9 小时前
uniapp运行项目到ios基座
ios·uni-app·cocoa
hunzi_19 小时前
搭建商城系统
java·uni-app·php
今日热点10 小时前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
合作小小程序员小小店12 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app