当前位置: 首页 > news >正文

uniapp 获取dom信息(封装获取元素信息工具函数)

在uniapp开发中,需要获取到dom的信息,需要用到uniapp的指定方式

uni.createSelectorQuery(),但是每次需要用到的时候都需要很长一段的繁琐代码,本篇文章将呈现获取dom信息方法封装,话不多说,上菜:

getDomInfo(id, that) {
	return new Promise((resolve, reject) => {
		if (!id) return reject('id/类名 不能为空')
		if (!that) return reject('this指向不能为空')
		const query = uni.createSelectorQuery().in(that);
		query.select(id).boundingClientRect(data => {
			// console.log("节点离页面顶部的距离为" + data.height);
			resolve(data || {})
		}).exec();
	})
},

因为uni.createSelectorQuery()是一个异步方法,所以封装的时候将其封装在一个Promise里面,其方法需要传入两个参数(元素id/类名,当前页面的this),下面举例使用:

<template>
    <view class="page">
        <view class="dom"></view>
    </view>
</template>

<script>
export default {
    async mounted() {
        let domInfo = await this.$util.getDomInfo('.dom', this);
    },
}
</script>

<style lang="scss" scoped>
.dom{
    width: 250rpx;
    height: 500rpx;
}
</style>

注:该方法需要早mounted挂载后使用才行,要不无法获取到dom信息

http://www.dtcms.com/a/100846.html

相关文章:

  • 多线程的三种实现方式
  • 基于单片机的智能奶茶机(论文 +源码)
  • 【ESP32】ESP32与MQTT通信:实现传感器数据监测与设备控制
  • GreenPlum学习
  • rsync备份(理论篇)
  • Keepalive+LVS+Nginx+NFS高可用架构
  • AI提示词(Prompt)设计优化方案 | 高效使用 AI 工具
  • 企业文档怎么保证安全传输?
  • jQuery Mobile 方向改变事件详解
  • Codeforces Round 1014 (Div. 2)(A-D)
  • pandas【9】数据合并concat/_append
  • 蓝桥云客 岛屿个数
  • Python if else while for 学习笔记
  • 基于Python的图书馆信息管理系统研发
  • 探寻性能优化:如何衡量?如何决策?
  • Cesium 全面介绍
  • 蓝桥与力扣刷题(34 在排序数组中查找元素的第一个和最后一个位置)
  • HTTP常见状态码分析
  • ICDE 2025[Tutorial]| 基于时间序列和时空数据的数据驱动决策
  • ArcGIS地理信息系统空间分析实验教程学习
  • [c语言日寄]通讯录pro版:文件操作
  • 知识体系_统计学_05_参数估计
  • 《无线江湖五绝:BLE/WiFi/ZigBee的频谱大战》
  • Pytorch学习笔记(十七)Image and Video - Adversarial Example Generation
  • Day 3 系统总线(1)
  • 未来环境生成助力具身导航!PanoGen++:基于领域自适应全景图像生成的视觉语言导航
  • DeepSeek+Kimi:PPT制作的效率革命
  • redis hashtable 的sizemask理解
  • 多线程 - 线程安全
  • QTreeView开发入门