在uniapp中获取到节点的位置信息等(高度、宽度、left、right、top、bottom等)

这篇具有很好参考价值的文章主要介绍了在uniapp中获取到节点的位置信息等(高度、宽度、left、right、top、bottom等)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:

在uniapp中我们有时候也会用到获取节点信息等操作,那么我们根据官方文档可以进行查阅,可以使用uni.createSelectorQuery()进行操作

一、uni.createSelectorQuery()介绍

返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。

Tips:

  • 使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。

  • 默认需要使用到 selectorQuery.in 方法。

返回的参数

callback 返回参数:

属性

类型

说明

id

String

节点的 ID

dataset

Object

节点的 dataset

left

Number

节点的左边界坐标

right

Number

节点的右边界坐标

top

Number

节点的上边界坐标

bottom

Number

节点的下边界坐标

width

Number

节点的宽度

height

Number

节点的高度

二、使用示例

代码:文章来源地址https://www.toymoban.com/news/detail-526956.html

onReady() {
            let view = uni.createSelectorQuery().select(".home-data");
            view.boundingClientRect(data=>{
                console.log("信息",data);
                this.clientHeight = data.height
            }).exec();
        },
uniapp 获取节点位置,小程序,uni-app,微信小程序,小程序,前端,Powered by 金山文档

获取的信息:

uniapp 获取节点位置,小程序,uni-app,微信小程序,小程序,前端,Powered by 金山文档

到了这里,关于在uniapp中获取到节点的位置信息等(高度、宽度、left、right、top、bottom等)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uniapp h5获取用户地理位置信息(高德地图)

     使用uni.getLocation()先获取到当前位置信息的经纬度 H5端测试可以使用http,上线打包需要设置为https模式 谷歌浏览器可能会获取不到任何信息,因为谷歌浏览器位置信息是连接谷歌服务器获取的,国内用户可能获取位置信息失败 使用高德开发平台注册一个key 高德开发平台:高

    2024年02月13日
    浏览(45)
  • 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)
  • JS获取各种屏幕的宽度和高度

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

    2023年04月27日
    浏览(49)
  • uniapp&&微信小程序中打开腾讯地图获取用户位置信息

    个人项目地址: SubTopH前端开发个人站 (自己开发的前端功能和UI组件,一些有趣的小功能,感兴趣的伙伴可以访问,欢迎提出更好的想法,私信沟通,网站属于静态页面) SubTopH前端开发个人站 https://subtop.gitee.io/subtoph.github.io/#/home 实现的效果 第一步:首先登录微信公众平

    2024年02月13日
    浏览(76)
  • Vue uniapp实现图片宽度100%、高度自适应的效果

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

    2024年02月15日
    浏览(69)
  • uniapp开发小程序解析经纬度获取当前位置信息(腾讯地图二)

    选择了腾讯地图定位 腾讯地图官网 具体实践步骤如下: 申请开发者密钥 申请密钥key 开通webserviceAPI服务 下载小程序SDK 腾讯地图小程序文档sdk 微信后台配置请求request域名 小程序管理后台 详细步骤 1. 下载解压后的 qqmap-wx-jssdk.js文件放到项目中,然后在页面引入使用 [ uni-app中

    2024年02月15日
    浏览(92)
  • uniapp开发小程序解析经纬度获取当前位置信息(高德地图三)

    选择了高德地图定位 高德地图官网 小程序步骤如下:      1.首先创建应用       2.点击增添key按钮申请小程序key         3.然后下载它的微信小程序版 SDK:微信小程序 SDK         4.把下载的sdk放在公共的文件里,这里我放在了utils文件目录下          5.使用页面导入此

    2024年02月02日
    浏览(60)
  • uniapp---- 获取当前位置的经纬度等信息的详细步骤(包含小程序)

    1.在项目中进行配置,我选择的是高德地图,填写相关信息。 2.进入高德官网:https://lbs.amap.com/upgrade#quota,进行登录注册,进入到“控制台”。 3.打开 “应用管理” - “我的应用”页面,点击“创建新应用”,根据页面提示填写内容创建应用。 4.在应用下点击“添加”为应用

    2024年02月11日
    浏览(52)
  • uniapp微信小程序获取当前位置信息、经纬度转换、导航地图实现

    1、调用接口,官网文档是这样写的 2、将经纬度转化为位置信息 需要开通腾讯位置服务,开发者每天有一万次的免费转化次数。开通地址  记住当前申请的key值,然后下载微信小程序JavaScriptSDK 然后安全域名设置,在小程序管理后台 - 开发 - 开发管理 - 开发设置 - “服务器域

    2024年02月11日
    浏览(69)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包