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

您好,我是肥晨。

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

相关推荐
耶啵奶膘35 分钟前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
racerun2 小时前
小程序导航设置更多内容的实现方法
小程序
说私域2 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
The_era_achievs_hero7 小时前
微信小程序41~50
微信小程序·小程序
耶啵奶膘14 小时前
uniapp——地图路线绘制map
uni-app
shadouqi14 小时前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩15 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤17 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app