uniapp小程序获取titleBar的高度和宽度

uniapp小程序获取titleBar的高度和宽度,第1张

就是小程序上方由胶囊占据的bar,就叫titleBar。

因为我们可以在胶囊左侧写标题和其他一些东西。这些东西要跟胶囊中线对齐。

首先我没段们要撑起statusBar的高度,也就是最顶部的那个bar。这个bar的高度很容易取得。

uni.getMenuButtonBoundingClientRect().top取得的是胶囊距离视口顶部的距离,减掉statusBar的高度,就是胶囊离statusBar下沿的距离。这个距离乘以2,加上胶囊自身高度,就是titleBar的蠢明高度。

见红色部分。

开发者工具中会有略微错位,无妨,以真机为准。

我们希望胶囊左侧空白区域与胶囊有间距,而且间距最好是等于胶囊到枯档誉右边边线的距离。这个前提下,左侧空白区域的宽度怎么算?

写成组件就是这样:

用法:

演示如何使用作用域插槽:

支付宝小程序获取元素宽高方昌兄皮法,小程序如果不能获取图片宽高,那耐差么图片设置宽高时,就有可能会出现图片变形,要想避免这种情况,除了图片等比例缩放,还可以用image组件加载图片,通过bindload动态的获取图片的高度尘行和宽度


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12552540.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-26
下一篇 2023-05-26

发表评论

登录后才能评论

评论列表(0条)

保存