微信小程序通过createSelectorQuery获取元素 高度,宽度与界面距离

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

小程序官方有提供给我们一个 const query = wx.createSelectorQuery() 函数
我们可以先编写这样一段代码
wxml

<view>
    <button bindtap="getDom">点击查看</button>
    <view class = "textIn" style = "height: 100px;width: 30px;">测试工具</view>
    <view class = "textIn" style = "height: 300px;width: 50px;">测试工具</view>
    <view class = "textIn" style = "height: 500px;width: 20px;">测试工具</view>
</view>

这里 我们定义了 多块 view 都用 行内样式设置了它的 高度和宽度
js编写代码如下

Page({
  data: {
    
  },
  onLoad(options) {
  },
  getDom() {
    const query = wx.createSelectorQuery()
    query.selectAll('.textIn').boundingClientRect();
    query.exec(function (res) {
        console.log(res);
    })
  }
 
})

我们运行代码 并点击按钮 点击查看
这里 我们获取了所有 类名中包含 textIn 的元素 并输出
这里 就正常的输出了 每个元素 高度 宽度 与页面上下左右的距离
微信小程序获取元素宽度,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-752274.html

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

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

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

相关文章

  • 微信小程序-获取设备信息,状态栏/导航栏/内容/tabBar高度设置

    效果展示  代码展示

    2024年02月11日
    浏览(59)
  • 微信小程序(四) 节点查询 | wx.createSelectorQuery

    先看官方文档给出的说明 查 询 节 点 信 息 的 对 象 , 返 回 一 个 S e l e c t o r Q u e r y 对 象 实 例 color{#9a2323}{查询节点信息的对象,返回一个 SelectorQuery 对象实例} 查 询 节 点 信 息 的 对 象 , 返 回 一 个 S e l e c t o r Q u e r y 对 象 实 例 拿到实例后再看上边挂载的方法 Select

    2024年02月11日
    浏览(38)
  • 在uniapp中获取微信小程序状态栏和导航栏的高度

    在微信小程序中,可以使用  uni.getSystemInfo()  方法获取设备的系统信息,包括状态栏的高度和顶部导航栏的高度。您可以使用这些信息计算顶部图标距离。 下面是一个示例代码,展示如何在 UniApp 中获取顶部图标距离: 在上述示例代码中,我们通过调用  uni.getSystemInfo()  方

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

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

    2024年02月08日
    浏览(42)
  • 微信小程序使用自定义tabbar 想要获取tabbar的高度,返回的结果是null,该如何获取?

    在使用自定义tabbar时,你可能会需要获取tabbar的高度,但是按照网上的方法却得不到正确的结果,这让你十分头疼。那么该怎么办呢?小编为大家整理了以下几个方法,希望能够帮到大家。 1️⃣ 使用wx.getSystemInfoSync()方法获取系统信息,然后通过计算得出tabbar的高度。 示例

    2024年02月11日
    浏览(61)
  • 微信小程序如何获取元素节点信息?

    通常在做微信小程序的时候我们经常会需要获取元素的信息,但是微信小程序有没有完整的“DOM”操作,无法像浏览器中获取元素。 不过在微信中也有一套自己的“DOM”,那就是NodesRef,它可以让我们像开发浏览器程序一样轻松愉快的获取页面元素 1.1、NodesRef是什么? Nodes

    2024年02月05日
    浏览(34)
  • 微信小程序通过点击按钮控制元素隐藏与显示

    一、效果图: 二、代码 js: wxml: 一、效果图: js: wxml:

    2024年02月12日
    浏览(49)
  • 微信小程序 通过响应式数据控制元素class属性

    我想大家照这个和我最初的目的一样 希望有和vue中v-bind:class一样方便的指令 但答案不太尽人意 这里 我们只能采用 三元运算符的形式 参考代码如下 这里 我们判断 如果当前item中的userId如果和我们响应式数据中的userId相同 则给与isThisUser 否则 赋值为空字符串 也能实现效果

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

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

    2024年02月16日
    浏览(44)
  • 微信小程序如何实现自定义导航栏、导航栏手机适配(获取导航栏、状态栏高度和胶囊位置)以及踩过的坑

    背景:不用官方默认的导航栏,想用自己自定义的 实现效果: :顶部状态栏、顶部导航栏、顶部状态导航栏、胶囊 原理: 自定义导航栏无非就是求得导航栏高度,并让内容容器垂直方向居中于导航栏高度 1.获取手机系统状态栏高度 2.获取胶囊位置(包括高度) 3.求得

    2024年03月12日
    浏览(60)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包