小程序获取元素信息

这篇具有很好参考价值的文章主要介绍了小程序获取元素信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

遇到问题:wx.createSelectorQuery() 返回值为null

   <view style="width: 200px;height: 200px;border: 1px solid red;" id="content">
     dom元素
   </view>
  let query = wx.createSelectorQuery();
  query.select("#content").boundingClientRect();
  query.exec(function (res) {
      console.log(res);// null

  });

原因:此属性只会选取页面范围内的节点

  • 如果将选择器的选取范围更改为自定义组件 component 内。
  • (初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)
  • 所以就造成页面渲染时,获取不到当前节点

官网链接:https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.in.html

解决方法:将wx.createSelectorQuery()改为wx.createSelectorQuery().in(this)

   <view style="width: 200px;height: 200px;border: 1px solid red;" id="content">
     dom元素
   </view>
  let query = wx.createSelectorQuery().in(this);
  query.select("#content").boundingClientRect();
  query.exec(function (res) {
      console.log(res);// null
     // .top 节点的上边界坐标
     // .scrollTop显示区域的竖直滚动位置

  });

注意文章来源地址https://www.toymoban.com/news/detail-507456.html

  1. 如果获取的元素,节点上有wx:if或者节点的元素上有wx:for,那么如果是在数据渲染之前获取的话,那么也是获取不到元素的,只有渲染之后,才能获取到元素,可以加定时器解决
  2. 如果元素添加了margin值的话,也是获取不到的

到了这里,关于小程序获取元素信息的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Python selenium获取元素信息

    视频版教程:一天掌握python爬虫【基础篇】 涵盖 requests、beautifulsoup、selenium 主要text属性和三个方法get_attribute(),get_property(),get_dom_attribute() text属性获取元素的文本信息; get_attribute(),get_property(),get_dom_attribute()三个方法都是获取元素的属性值 区别是property是DOM中的属性,

    2024年02月06日
    浏览(45)
  • 关于微信小程序调用H5腾讯地图API获取定位信息提示失败问题--解决办法之一

    在跳转到H5页面加载腾讯地图API获取定位信息时,“真机调试”、“开发模式”都可以使用 web-view 组件访问我需要的路径。只有“体验版”、“线上版本”会出现这个错误提示。正常加载都是正常的,但是因为腾讯地图API在获取定位信息的同时,会在页面上内嵌一个隐藏的

    2024年04月26日
    浏览(58)
  • 【taro react】---- 获取元素的位置和宽高等信息

    1. 需求分析 添加节点的布局位置的查询请求。相对于显示区域,以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。 区分小程序和H5的环境,调用 getBoundingClientRect 获取对应的信息。 2. H5 实现 判断传入元素是否是window窗口,是window窗口,直

    2024年02月14日
    浏览(47)
  • uni_app+vite+vue3+ts开发小程序,解决getUserProfile()获取用户信息问题

    最近开发小程序,开发环境uni_app+vue3等。在获取小程序平台用户信息是报错: {errMsg: \\\"getUserProfile:fail must be invoked by user tap gesture\\\", errNo: 21500} 我在抖音上查了下错误码: 看到这个解释也是瞬间无语了,然后在平台查找错误,找了半天终于在vue2 升级vue3文档里面找到解决办法

    2024年02月04日
    浏览(73)
  • 基于scrcpy的Android群控项目重构,获取Android屏幕元素信息并编写自动化事件

    基于scrcpy的远程调试方案 基于scrcpy的Android群控项目重构 基于scrcpy的Android群控项目重构 进阶版 基于scrcpy的Android群控项目重构,获取Android屏幕元素信息并编写自动化事件(视频) 基于scrcpy的Android群控项目重构,获取Android屏幕元素信息并编写自动化事件(博客) 基于scrcpy的

    2024年02月16日
    浏览(65)
  • 微信小程序获取dom元素

    微信小程序不支持document.querySelect获取元素,它内置了获取元素的两种方法,第一种是通过 wx.createSelectorQuery()获取dom元素,第二种时给想要使用的对象绑定事件,输出e对象,就能拿到该对象的一些信息 先在页面上定义一个view标签  

    2024年02月08日
    浏览(42)
  • selenium常见问题(网页缩放、滑动,元素获取不到......)

    解决办法: 方法一: element = driver.find_element_by_xpath(\\\"表达式\\\") driver.execute_script(\\\"arguments[0].click();\\\", element) 方法二: element = driver.find_element_by_xpath(\\\'表达式\\\') webdriver.ActionChains(driver).move_to_element(element ).click(element ).perform() 方法一 使用js脚本直接操作: js = \\\"var q=document.getElementById

    2024年02月13日
    浏览(42)
  • 小程序获取窗口宽高和dom元素

    wx.getSystemInfoSync().windowWidth // 获取当前窗口的宽度 wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 wx.getSystemInfoSync().model // 获取当前采用的设备 wx.getSystemInfoSync().pixelRatio wx.getSystemInfoSync().language // 获取当前所采用的的语言 wx.getSystemInfoSync().version // 获取当前设备的版本 ==

    2024年02月15日
    浏览(46)
  • 你的设备遇到问题,需要重启;我们只收集某些错误信息,然后为你重新启动。

    VMware安装centos和打开其他虚拟机时电脑蓝屏报错: 你的设备遇到问题,需要重启;我们只收集某些错误信息,然后为你重新启动。 我的解决办法:开启Windows的虚拟机平台 打开控制面板,点击“程序”,点击“启用或关闭windows功能”,勾选“虚拟机平台”

    2024年02月11日
    浏览(220)
  • 微信小程序获取元素节点并对其进行操作

    1.封装获取元素的方法 utils.js 2.页面js中引入 3.页面js中使用

    2024年02月16日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包