小程序如何使元素和胶囊区域居中对齐?

最新推荐文章于 2024-09-20 08:53:15 发布
原创 最新推荐文章于 2024-09-20 08:53:15 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #小程序

本文介绍了一种在不同手机型号上实现元素居中对齐的方法。通过获取系统的titleBarHeight和statusBarHeight，计算出元素定位的高度，使得元素能够准确地与胶囊区对齐。此外还提供了一个提高性能的小技巧。

iphone 7：  

iphone x : 

 

Nexus 5:

经测试，要想使元素和胶囊区居中对齐，元素的定位高度为：  机型的titleBarHeight/2 +statusBarHeight-元素的高度/2，单位为px

1.通过 getSystemInfo 获取机型的信息 （titleBarHeight，statusBarHeight)

2. 通过机型的titleBarHeight/2 +statusBarHeight-元素的高度/2 得出 元素定位的高度

3.为了提高性能，可以将第二步算出的值缓存在本地，下次赋值时直接本地获取即可。

 

微信小程序顶部透明状态标题栏搜索栏与胶囊对齐
qq_15369533的博客
08-21 1698
微信小程序顶部透明状态标题栏搜索栏LOGO与胶囊对齐。
uniapp标题水平对齐微信小程序胶囊按钮及适配
weixin_42220130的博客
06-26 2273
标签加样式加动态计算实现效果。
racte margin 居中 失效_小程序自定义头部如何使元素和胶囊区域居中对齐?
weixin_39575212的博客
10-28 243
小程序(这里指的是支付宝的小程序，也许其他平台的小程序机制不太一样)经常会使用自定义头部，自定头部除了对头部状态栏和标题栏的处理，有时会有特殊的需求，例如：为了美观，需要把某个logo/文案和胶囊区域居中对齐，因为每个机型的头部高度不一样iphone 7：iphone x :Nexus 5:经过多机型测试，结论如下：要想使元素和胶囊区居中对齐，元素的定位高度为： 机型的titleB...
微信小程序顶部标题栏与胶囊对齐
大浪的专栏
03-16 5173
介绍 最近在做微信小程序时，顶部标题栏总是与胶囊对不齐。往往是在这款手机上对齐了，在另外一款手机差很多。我再查阅资料后，提出了一种方法解决这个问题，即：在页面onLoad或组件created时，利用微信小程序提供的API，获取系统状态栏高度和胶囊信息，进而动态调整顶部标题栏样式。在苹果、小米、荣耀手机做验证，能做到精准对齐。 理论 胶囊样式应该是垂直居中，有1px的border，border-radius为14px 。 若要使顶部标题栏与胶囊对齐，则其...
小程序获取胶囊位置，并根据胶囊位置设置定位
weixin_44524835的博客
07-27 2481
<view class=“test" catchtouchmove style="top:{{topHeight}}px;right:{{rightPosition}}px"> </view> lifetimes: { // 在组件实例进入页面节点树时执行 attached() { const { height, top, right } = wx.getMenuButtonBoundingClientRect(); const width = wx.g
如何对齐微信小程序胶囊按钮？
weixin_42220130的博客
08-03 675
效果图：标题居中，隐藏左侧返回首页按钮。
小程序自定义导航栏，胶囊对齐
Mgf_Yzy的博客
04-18 3630
最近在做一个小程序项目，要求自定义导航栏，自定义导航栏好说，但是想要胶囊对其就没那么简单了 官方也没有给出具体的做法，然后上百度，最终将实现代码给有类似困扰各位同猿分享 实现效果图 iPhone 5 iPhone 6/7/8 iPhone X iPad 想要胶囊对齐，就要搞清楚，它是由什么组成的 图片，是在网上找的，自己不会作图，只为说明问题，侵联删，如有打扰，请谅解 它是由状态栏和导航栏两部分组成，所以想要实现对齐，就得拿到状态栏和导航栏的高度 获取状态栏高度 wx.getSyste
uniapp关于支付宝小程序或钉钉小程序标题栏自定义.txt
12-30
1. **兼容性**：虽然本示例主要针对支付宝小程序和钉钉小程序，但类似的方法也可以应用于其他支持uniapp的小程序平台。 2. **性能优化**：使用`position: fixed;`可能会导致某些布局上的问题，特别是在复杂页面中。...
uniapp实现自定义导航内容高度居中（兼容APP端以及小程序端与胶囊对齐）
weixin_53339757的博客
08-09 2705
uniapp实现自定义导航内容高度居中（兼容APP端以及小程序端与胶囊对齐）
微信小程序：webview头部状态栏被黑色区域填充问题
许章正的博客
06-21 6518
很多小伙伴在微信小程序中使用webview标签的时候肯定会遇到过同样的情况，头部的状态栏和胶囊区会被黑色填充，自己写的header头部组件也无法使用。 如图： 问题的发生原因是因为：该区域为状态栏区域及导航栏区域，默认微信小程序的状态栏区域背景色为黑色，背景色颜色设置同时也会作用到导航栏区域上，所以就变成了上图中的头部全是黑色的问题。 解决这个问题的方案： 在对应页面的页面配置中增加如下配置（将状态栏和导航栏颜色设置为白色）： "navigationBarBackgroundColor":
小程序自定义导航栏，实现与胶囊对齐功能
qq_43342124的博客
12-25 4295
注意screenHeight屏高：屏幕高度 = 原生NavigationBar高度（含状态栏高度）+ 可使用窗口高度 + 原生TabBar高度 但是自定义导航栏screenHeight=windowHeight 由于是自定义导航栏无法获取原生NavigationBar高度，需要手动计算。 首先先获取状态栏高度和右上角胶囊的布局位置信息： 分别是uni.getSystemInfo()获取系统信息以及uni.getMenuButtonBoundingClientRect（这个函数h5环境下不能用要使用条件编.
uniapp微信小程序如何做到内容区和右侧胶囊对齐
Yzfeng21的博客
09-20 408
template中内容如下。
小程序自定义头部navigationBar
优快云_shipingan的博客
03-22 8320
自定义头部高度的计算思路 先来原生小程序的 首先在app.js文件内的onLanch获取到当前机型的信号区和胶囊区的高度并存入globalData App({ onLaunch() { this.globalData.info = wx.getSystemInfoSync().statusBarHeight this.globalData.top = wx.getMenuButtonBoundingClientRect().top this.globalData.bottom
uniapp搜索框适配小程序对齐胶囊
Front小思的博客
12-02 3580
需求：uniapp框架开发中 自定义搜索栏编译微信小程序与适配与其右边胶囊袋对齐！
微信小程序获取胶囊信息并对齐
weixin_44850797的博客
11-25 2330
之前一直是开发app，为了裂变用户要转向小程序，才知道右上角这个东西叫胶囊 接到公司需求要将上方的搜索栏和将囊对齐并且一样宽，用了position：fixed样式后发现不管是用px还是rpx还是其他单位都无法解决不同手机型号的兼容问题，这个手机对齐了，其他手机就无法对齐。 最后发现原来官网有这个胶囊信息的获取uni.getMenuButtonBoundingClientRect() 链接: uniapp官网关于uni.getMenuButtonBoundingClientRect() 我是通过这个方法动态
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
静如雪的博客
11-30 4536
对于一些电商平台来说，当商品被转发后会很影响客户查看其它产品和首页，这时候就需要使用自定义导航栏自己写一个“胶囊按钮”。这篇文章主要介绍了详见微信小程序胶囊按钮返回|首页自定义导航栏,需要的朋友可以参考下 项目代码：https://github.com/Shay0921/header-navbar.git 在小程序中，从转发出来的小程序消息卡片进入，因为页面栈中只有一个，所以不会出现返回...
微信小程序 自定义导航栏，只保留右上角胶囊按钮
a_靖的博客
03-06 6166
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 navigationStyle 导航栏样式，仅支持以下值：default默认样式custom自定义导航栏，只保留右上角胶囊按钮 在app.json 的window 加上"navigationStyle": "custom", 就可以设置成功 代码如图： 效果图 ...
微信小程序：导航栏不居中问题，需自定义
Crazy_GirlLL的博客
12-15 5364
查资料得知： 所以如果都要居中的导航栏的话，就需要自定义导航栏 具体参考： https://www.cnblogs.com/sese/p/9761713.html
2021年前端面试题及答案
热门推荐
Raleway的博客
02-11 17万+
前端面试汇总（2020年） 一 大纲 1、前言 2、前端工程化 3、前端设计模式 4、前端安全性问题 5、前端跨域问题 6、前端数据加密 7、前端http相关问题 8、*前端基础知识点面试题 9、前端技术栈问题 前言 由于新冠肺炎疫情，现在成天呆在家里，加上也要准备面试，就在家里看面试题...
小程序胶囊对齐
最新发布
07-22
在小程序中调整胶囊组件的对齐方式，通常涉及到自定义组件的布局和样式设置。微信小程序中的胶囊按钮（如导航栏右侧的菜单按钮）默认是固定在右上角的，但通过自定义组件和样式调整，可以实现对齐效果。 ### 胶囊组件对齐方式设置 #### 1. 获取胶囊按钮的位置信息 为了实现对齐效果，首先需要获取胶囊按钮的位置信息。可以通过 `uni.getMenuButtonBoundingClientRect()` 方法获取胶囊按钮的布局信息，包括其 `top`、`bottom`、`left`、`right`、`width` 和 `height` 等属性。这些信息可以帮助你精确地将自定义组件与胶囊按钮对齐。 ```javascript onLoad() { let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); this.searchBarTop = menuButtonInfo.top; this.searchBarHeight = menuButtonInfo.height; } ``` #### 2. 设置自定义组件的样式 在获取到胶囊按钮的位置信息后，可以通过动态设置自定义组件的样式来实现对齐。例如，可以将自定义组件的 `top` 和 `height` 属性设置为与胶囊按钮一致，以实现垂直对齐。 ```html <view class="custom-component" :style="{ top: searchBarTop + 'px', height: searchBarHeight + 'px' }"> <!-- 自定义组件内容 --> </view> ``` #### 3. 使用 CSS 进行水平对齐 除了垂直对齐外，还可以通过 CSS 样式来实现水平对齐。例如，可以使用 `text-align` 属性来控制组件内部内容的对齐方式，或者使用 `flex` 布局来实现更灵活的对齐。 ```css .custom-component { display: flex; justify-content: center; /* 水平居中对齐 */ align-items: center; /* 垂直居中对齐 */ } ``` #### 4. 动态计算位置 如果需要更复杂的对齐效果，可以结合 JavaScript 动态计算组件的位置。例如，可以根据胶囊按钮的 `right` 属性来设置自定义组件的 `right` 属性，从而实现右侧对齐。 ```javascript onLoad() { let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); this.searchBarRight = menuButtonInfo.right; } ``` ```html <view class="custom-component" :style="{ right: searchBarRight + 'px' }"> <!-- 自定义组件内容 --> </view> ``` ### 总结 通过上述方法，可以灵活地调整小程序中胶囊组件的对齐方式。关键在于获取胶囊按钮的位置信息，并根据这些信息动态设置自定义组件的样式。这样不仅可以实现垂直对齐，还可以实现水平对齐和其他复杂的布局效果。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值