Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >[保姆级教程]uniapp小程序获取右上角胶囊位置信息

[保姆级教程]uniapp小程序获取右上角胶囊位置信息

原创
作者头像
肥晨
发布于 2024-07-03 05:15:34
发布于 2024-07-03 05:15:34
1K0
举报
文章被收录于专栏:微信小程序微信小程序

导文

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

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

代码语言:js
AI代码解释
复制
<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
AI代码解释
复制
<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
AI代码解释
复制
  	"globalStyle": {
		"navigationStyle": "custom"
	},

当前页面隐藏

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

您好,我是肥晨。

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
[保姆级教程]uniapp自定义导航栏
在你的页面 pages.json 配置中,为相应的页面设置 navigationStyle 为 custom,这将隐藏默认的导航栏。
肥晨
2024/07/04
2.1K0
微信小程序自定义顶部导航栏并适配不同机型
在小程序中,顶部导航栏是一个非常重要的组件,它不仅可以方便用户进行页面切换,还可以提高用户体验。默认情况下,小程序的顶部导航栏是由系统自动生成的,我们只能修改一些基本的样式,如背景色、文字颜色等。但是,如果想要实现更加复杂的样式,如自定义图标、自定义背景等,而且在不同的手机屏幕上,导航栏的高度和样式也可能有所不同。因此,我们需要自定义顶部导航栏,以满足我们的设计需求和用户体验。
Front_Yue
2023/12/10
5.4K3
微信小程序自定义顶部导航栏并适配不同机型
uni-app入门教程(2)页面样式、配置文件和生命周期
本文先介绍uni-app的页面样式和布局,包括尺寸单位、样式导入、内联样式和选择器等;再介绍两个配置文件,即pages.json和manifest.json的配置项和基本使用;最后简要介绍了生命周期的基本使用。
cutercorley
2020/12/16
3.1K0
uni-app入门教程(2)页面样式、配置文件和生命周期
原创uniapp+vue3+pinia仿ios桌面后台OA管理系统
vue3-uni-weos:一款基于uniapp+vite5.x+pinia搭建手机端后台OA管理模板项目。
andy2018
2024/05/22
5531
原创uniapp+vue3+pinia仿ios桌面后台OA管理系统
uniapp-vue3-wechat聊天实例|uni-app+pinia2仿微信app
Uniapp_Vue3_Chat基于uni-app+vue3+pinia2+uv-ui跨三端(h5+小程序+APP端)仿微信聊天。
andy2018
2024/04/29
8100
uni-app(优医咨询)项目实战 - 第2天
uni-app 是组合了 Vue 和微信小程序的相关技术知识,要求大家同时俱备 Vue 和原生小程序的开发基础。
程序员朱永胜
2024/04/19
3310
uni-app(优医咨询)项目实战 - 第2天
保姆级全栈项目BBS 开发实录 第二章:前端基础页面
https://cdn.jsdelivr.net/gh/Qiu-JW/NotePicture/2024/08/image-20240806215014105.png
Qiuner
2024/11/21
870
保姆级全栈项目BBS 开发实录 第二章:前端基础页面
微信小程序自定义导航栏兼容适配所有机型
这是小程序官方文档截图,可以看到导航栏样式支持两种,默认是带导航栏,另外一种是自定义导航栏-custom,如果使用自定义导航栏,我们可以
青年码农
2021/11/12
2.6K0
测试平台分支-小程序端-2-第一个接口(下)地址导航
最近一直在加班,所以没时间更新,房子也要到期了搬家,等稳定下来再持续更新。 安装uni-ui 实在没想好选什么ui,就选择用uniapp官方出的插件了。 首先是安装:uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别组件等多种使用方式 通过 uni_modules 导入全部组件: 使用hbuilderx导入就可以了 安装以后记得重新运行程序。 代码编写 简单写了下超链接: 发现uniapp的超链接在小程序里是没法直接跳转的,所以需要其他办法 新建一个out页
怪盗LYL
2022/11/08
2910
测试平台分支-小程序端-2-第一个接口(下)地址导航
uni-app(优医咨询)项目实战 - 第4天
此处的权限验证是指服务端接口验证码 token 是否存在或有效,这就需要我们在调用接口时将 token 以自定义头信息的方式发送给服务端接口,如果 token 不存在或者 token 过期了,则接口会返回状态码的值为 401。
程序员朱永胜
2024/04/25
4200
『UniApp』核心语法
下载地址:https://www.dcloud.io/hbuilderx.html
程序员NEO
2023/12/26
6692
『UniApp』核心语法
微信小程序自定义状态栏
为了避免遮挡用户手机顶部状态栏,还需要获取用户手机状态栏的高度,并在在每个页面中添加一个占位用的 view标签来防止遮挡用户状态栏。
渔父歌
2019/03/15
2K0
微信小程序自定义状态栏
基于uniapp+vue3多端h5+小程序+App端直播商城
uniapp-welive一款基于uni-app+vue3+pinia+vk-uview等技术搭建跨端仿抖音直播商城项目。
andy2018
2024/01/02
9470
uni-app 安卓APP开发记录
在不知道这个属性之前,发现可以通过设置--status-bar-height(uni-app全局封装的变量)实现
biaoblog.cn 个人博客
2022/12/08
1K0
uniapp自定义导航配置分享
基于uniapp 自定义导航栏|仿微信、淘宝顶部导航条,支持背景渐变、标题居左 /居中、搜索条,圆点提示,按钮可自定义传入文字 /字体图标 /图片
andy2018
2019/09/18
6.4K0
uniapp自定义导航配置分享
【愚公系列】2022年11月 uniapp专题-优购电商-个人中心页面
个人中心的信息复杂度与产品本身有关。体系越庞大的产品,对应个人中心页面需要承载的内容越多,结构势必复杂。
愚公搬代码
2022/12/05
6180
【愚公系列】2022年11月 uniapp专题-优购电商-个人中心页面
Uniapp商城项目【详细笔记文档】
1.1 通过hbuilderx编辑器创建一个默认的uni-app项目(如图1——图2)
MIKE笔记
2023/03/23
1.8K0
Uniapp商城项目【详细笔记文档】
【uniapp】视频分享预览小程序
六一收到个不同以往的需求,我的指导老师最近有点忙,让我们帮忙做一个可以通过二维码预览视频的小程序
德宏大魔王
2023/08/08
4350
【uniapp】视频分享预览小程序
uniapp APP端水印相机实现
使用插件https://ext.dcloud.net.cn/plugin?id=4892
风花一世月
2024/03/19
5710
uniapp APP端水印相机实现
记录一款笑话小程序的创作完整历程(二)
记录一款笑话小程序的创作完整历程(二) 笑话小程序真容-先睹为快 欢迎扫码围观,欢迎光临芝麻笑话小程序!谢谢! [在这里插入图片描述] 首页 首页包含的功能: 展示内容列表 点击查看详情 点赞 点击右上角分享整个小程序 分享单个内容 展示内容列表 技术点: v-for循环指令 uni-card卡片组件 技术实现 引入uni-card卡片组件 <view class="example-body"> <uni-card :isShadow="true" :title=item.title mode
leo689
2021/10/01
3000
记录一款笑话小程序的创作完整历程(二)
推荐阅读
相关推荐
[保姆级教程]uniapp自定义导航栏
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档