小程序 获取顶部胶囊的信息,设备的宽高

最新推荐文章于 2024-12-10 15:38:47 发布
最新推荐文章于 2024-12-10 15:38:47 发布
阅读量858 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信H5 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44606457/article/details/115864673
本文介绍如何使用uni.getMenuButtonBoundingClientRect()获取胶囊按钮的位置信息（包括宽度、高度、top和bottom），以及如何通过uni.getSystemInfoSync()同步获取设备的基本信息，如屏幕宽高等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

胶囊： uni.getMenuButtonBoundingClientRect(); //  里面有 宽,高，top,bottom  
设备信息宽高： uni.getSystemInfoSync()
【微信小程序】小程序获取元素的宽度高度
疾术客
05-30 4657
微信小程序不能进行DOM操作，所以获取元素的信息就不能按照常规手法来做了。首先需要借助微信给我们开发者提供的一个API来实现返回一个SelectorQuery 对象实例。 接下来就好办多了，话不多说，上代码！ API：wx.createSelectorQuery() 具体实现代码如下： const query = wx.createSelectorQuery()...
小程序胶囊
m0_68456754的博客
05-30 327
// app.js App({ // Appdata: { // height: 0, //胶囊高度 // navheight: 0, //导航栏高度 // right: 0, // left: 0, // }, onLaunch() { // 展示本地存储能力 const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSy.
在uniapp中，微信小程序获取胶囊的高度、宽度，且适配微信小程序、App
Lulu_yo的博客
10-07 7131
【代码】在uniapp中，微信小程序获取胶囊的高度、宽度，且适配微信小程序、App。
对微信小程序、头条小程序、H5的头部胶囊和高度的获取
Aimonz的博客
07-21 346
【代码】对微信小程序、头条小程序、H5的头部胶囊和高度的获取。
随手记：小程序获取胶囊宽高
最新发布
weixin_63515766的博客
12-10 646
小程序获取胶囊宽高
小程序获取胶囊区大小
m573556796的博客
08-10 323
小程序获取胶囊区大小。
自定义原生小程序顶部及获取胶囊信息
文龙刚的博客
05-24 481
【代码】自定义原生小程序顶部及获取胶囊信息。
微信小程序第一节 —— 自定义顶部、底部导航栏以及获取胶囊体位置信息。
是江迪呀 的博客
03-03 9412
如果需要自定义顶部和底部导航。那么如何在自定义后能够适配不同的机型而不会出现样式问题呢？我们可以通过方法来获取页面的信息来保证样式的正确性。此方法常用于app.js文件中的onLanch()方法中，保证这些信息优先被加载，并把获取到的页面信息放到全局变量中，方便其他页面的获取使用。在此之前需要开启自定义顶部和底部导航栏。
微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）
10-15
首先，我们要了解`navigationBar`的基本概念，它是小程序页面顶部的默认导航栏，包含返回按钮、标题以及胶囊按钮（用于调起用户菜单）。 ### 隐藏原生`navigationBar` 为了让自定义导航栏生效，我们需要在`app....
微信小程序获取胶囊信息并对齐
weixin_44850797的博客
11-25 2292
之前一直是开发app，为了裂变用户要转向小程序，才知道右上角这个东西叫胶囊 接到公司需求要将上方的搜索栏和将囊对齐并且一样宽，用了position：fixed样式后发现不管是用px还是rpx还是其他单位都无法解决不同手机型号的兼容问题，这个手机对齐了，其他手机就无法对齐。 最后发现原来官网有这个胶囊信息的获取uni.getMenuButtonBoundingClientRect() 链接: uniapp官网关于uni.getMenuButtonBoundingClientRect() 我是通过这个方法动态
微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）
03-29
获取胶囊按钮、状态栏相关数据以供后续计算 根据不同机型计算出该机型的导航栏高度，进行适配 编写新的导航栏 引用到页面 正文 一、隐藏原生的navigationBar window全局配置里有个参数：navigationStyle（导航栏样式...
发一篇博客 获取微信小程序胶囊位置
sdgjah2的博客
01-17 492
【代码】发一篇博客 获取微信小程序胶囊位置。
uniapp 微信小程序 获取右上角胶囊按钮布局信息
沛沛呀、
03-26 2994
let res=wx.getMenuButtonBoundingClientRect() 返回值 width number 宽度，单位：px height number 高度，单位：px top number 上边界坐标，单位：px right number 右边界坐标，单位：px bottom number 下边界坐标，单位：px left number 左边界坐标，单位：px 具体使用： <template> <view class="cont
微信小程序获取右上角胶囊距顶部的距离和胶囊的尺寸
Cheryl的加工厂
04-13 4201
<view class="search-container p-a pl-20" :style="{ top: statusHeight + 'px', height: navHeight + 'px' }" > </view> const res = wx.getMenuButtonBoundingClientRect() const statusHeight = res.top //胶囊距离顶部 const navHeight = res.height //胶囊高度 t
[保姆级教程]uniapp小程序获取右上角胶囊位置信息
肥晨开发的学习之路
06-20 2596
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。uniapp小程序获取右上角胶囊位置信息。配置中，为相应的页面设置。，这将隐藏默认的导航栏。
微信小程序右上角胶囊按钮尺寸
热门推荐
NaHCO4的博客
04-29 1万+
微信小程序胶囊按钮尺寸 在自定义时导航栏时，往往我们为了设计的美观性，需要要求我们自己设计的导航组件在某些尺寸上能与右上角那个可爱的胶囊按钮保持一致，以下是胶囊按钮的尺寸： ...
小程序获取胶囊位置，并根据胶囊位置设置定位
weixin_44524835的博客
07-27 2424
<view class=“test" catchtouchmove style="top:{{topHeight}}px;right:{{rightPosition}}px"> </view> lifetimes: { // 在组件实例进入页面节点树时执行 attached() { const { height, top, right } = wx.getMenuButtonBoundingClientRect(); const width = wx.g
【小程序】uni-app自定义导航栏适配小程序，对齐胶囊
Get your hands dirty
11-14 4799
uni-app自定义导航栏适配小程序，对齐胶囊
微信小程序如何实现自定义导航栏、导航栏手机适配（获取导航栏、状态栏高度和胶囊位置）以及踩过的坑
浩冉学编程的博客
03-05 4962
微信小程序如何实现自定义导航栏以及踩过的坑，获取胶囊位置计算导航栏位置，让图标始终保持靠着胶囊左边
小程序如何获取胶囊距离顶部的高度
06-03
小程序可以通过调用API获取胶囊距离顶部的高度。具体实现步骤如下： 1. 获取系统信息，包括胶囊按钮的高度和顶部状态栏的高度。 ``` wx.getSystemInfo({ success: function(res) { var capsuleHeight = res....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值