uniapp 获取 view 的宽度、高度以及上下左右左边界位置

这篇具有很好参考价值的文章主要介绍了uniapp 获取 view 的宽度、高度以及上下左右左边界位置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<view class="cont-box"></view>
/* 获取节点信息的对象 */
getElementRect() {
  const query = uni.createSelectorQuery().in(this);
  query
    .select(".cont-box")
    .boundingClientRect(res => {
      console.log(res);
      console.log(res.height); // 102.85714721679688
    })
    .exec();
}

uniapp 获取 view 的宽度、高度以及上下左右左边界位置,uni-app,uni-app,javascript,前端

boundingClientRect 返回的 res 结果(以像素[px]为单位)

属性 类型 说明
id String 节点的 ID
dataset Object 节点的 dataset
left Number 节点的左边界坐标
right Number 节点的右边界坐标
top Number 节点的上边界坐标
bottom Number 节点的下边界坐标
width Number 节点的宽度
height Number 节点的高度

更多可参考:uni.createSelectorQuery() | uni-app官网文章来源地址https://www.toymoban.com/news/detail-654075.html

到了这里,关于uniapp 获取 view 的宽度、高度以及上下左右左边界位置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp小程序—实现下滑关闭抽屉(包含上下左右滑动)

    操作:点击相应文字时从底部出现弹框,下滑超过一定速率,弹框回到下方隐藏; 这个组件有些多余的地方我没删,可以自行扩展。以下附带移动端的上下左右滑动,可以借鉴实现小程序的左右滑动

    2024年02月13日
    浏览(45)
  • Android动态调整View的宽度和高度

    Android动态调整View的宽度和高度 在Android开发中,我们经常需要根据不同的需求来动态地设置View的宽度和高度。这可以通过代码来实现,而不是在XML布局中静态地设置。 一、动态设置View的宽度 要动态设置View的宽度,我们可以使用LayoutParams类。LayoutParams是一个用于描述View的布

    2024年02月07日
    浏览(42)
  • uniapp-微信小程序实现swiper左右滚动切换tab,上下滚动加载列表

    思路:左右滑动使用swiper,上下滑动用scroll-view,swiper改变时同时改变tab并更新列表 坑点: 1. swiper高度问题,导致滑动不到最底部和最顶部         需要手动计算,减去顶部高度和底部tabbar,并且需要同时设置padding-top和paddin-botton,否则列表显示不完整 2. 由于最开始的代码

    2024年02月04日
    浏览(64)
  • elementui表格插槽使用的input输入框,添加键盘快捷键上下左右箭头,获取焦点

    给表格行、列赋值index;获取表格的总列数 在el-table 添加 :cell-class-name=\\\"tableRowClassName\\\" 当某个单元格被点击时 获取行列 触发及键盘事件 @cell-click=\\\"handleCellClick\\\" 给input赋值id

    2024年02月02日
    浏览(51)
  • 微信小程序在ios端上下左右滑动以及底部滚动条的解决方案

    最近在写小程序,碰到一个非常棘手的问题,就是安卓没事,苹果手机上的页面能上下左右的滑动,不美观这里我理解为不兼容,本着有问题就去解决,苹果默认应该是滑动的,下面是解决方法 底部滚动条解决

    2024年02月04日
    浏览(152)
  • Android获取文本的宽度和高度

    方法一:先绘制文本所在的矩形区域,再获取矩形区域的宽度 上述方法由于矩形边框紧贴文字,所有没有多余的空间。 方法二:通过Paint的 measureText 方法直接测量文本宽度 此方法计算出的宽度会加上开始和结尾的空间,这个空间就是文字和文字之间的空间,为了美观而存在

    2024年02月09日
    浏览(52)
  • JS--获取元素的高度与宽度

    原文网址:JS--获取元素的高度与宽度_IT利刃出鞘的博客-CSDN博客 说明 本文介绍如何使用JavaScript获取HTML标签的高度与宽度。 读取的方法 document.getElementById(\\\"id\\\").clientHeight 元素尺寸属性 说明 clientWidth 获取元素可视部分的宽度,即 CSS 的 width 和 padding 属性值之和,元素边框和滚

    2024年02月06日
    浏览(57)
  • 小程序中使用scroll-view组件,内容高度未超过容器高度时依然可以上下滑动小段距离的问题

    解决办法: 如下代码:检查下scroll-view组件是否设置了上下padding 或者 scroll-view的父盒子 view class=“home-page” … /view 设置了上下padding,如果设置了,去掉就可以解决问题。 (完)

    2024年02月08日
    浏览(40)
  • JS获取各种屏幕的宽度和高度

    JS获取各种屏幕的宽度和高度 描述 用法 网页可见区域宽 document.body.clientWidth 网页可见区域高 document.body.clientHeight 网页可见区域宽 document.body.offsetWidth (包括边线的宽) 网页可见区域高 document.body.offsetHeight (包括边线的高) 网页正文全文宽 document.body.scrollWidth 网页正文全文高 d

    2023年04月27日
    浏览(49)
  • Vue uniapp实现图片宽度100%、高度自适应的效果

    在Uniapp中,我们可以使用image组件来加载图片,而想要实现图片宽度100%、高度自适应的效果,可以通过以下步骤实现: 首先,在image组件上设置mode属性为widthFix,表示按照图片的宽度等比缩放,并保证图片宽度为100%。 接着,在image组件上设置style属性,为图片设置高度自适应

    2024年02月15日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包