【踩坑记录】uniapp 获取页面中自定义组件中元素的参数

最新推荐文章于 2025-10-28 15:11:40 发布
原创 最新推荐文章于 2025-10-28 15:11:40 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app

本文介绍了一种使用uni.createSelectorQuery方法来获取自定义组件中特定元素尺寸的技术。通过实例展示了如何利用此方法精确获得页面上指定元素的位置及大小。 
uni.createSelectorQuery().in(this.selectComponent('#myTitle')).select('.titleStyle').boundingClientRect((data)=>{
	console.log('titleStyle---',data);
}).exec()

myTitle：页面中给自定义组件添加的id

.titleStyle：要获取的自定义组件中的元素的标志

uniapp中获取dom元素的方法，更改dom元素颜色（遇坑记录）
weixin_45745641的博客
02-08 1万+
最近写uniapp，遇到一个需要获取到页面中dom元素，我第一反应是使用this.$ refs进行获取，于是我开心的使用this.$refs写了很多代码，使用h5调试的过程中没有发现任何问题，但后来真机调试的时候发现在app端无效，于是我查看文档发现了：非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）
记录踩坑时刻：uniapp 微信小程序 自定义tabBar
weixin_58416385的博客
09-28 2098
自定义tabBar 可以使内容更贴近需求。不过有个不好的地方，第一次切换的时候会出现闪烁现象 一、pages.json文件中添加tarBar 因为需要用到tabBar跳转，用于做判断是否tabBar切换(这里可以只添加路径，其他的可以不需要) 二、把原生的tabBar隐藏起来 在App.vue中把原生的 tabBar 隐藏起来 三、自定义一个tabBar组件 注意：组件名称需要 和 组件目录名称一致 在组件...
解决调用接口获取数据后在mounted内获取不到DOM元素的原因
Hello World
08-08 3606
我在做项目的时候遇到这个问题，调用后台接口获取数据赋值给数组列表并且重新渲染DOM元素内容 其实是想通过js给DOM元素修改下样式，因此引发出这个问题~ 很奇怪的是， 我在mounted钩子函数里去获取了不用重新渲染的父节点，能够获取到该元素，而且包含了我想要获取的被重新渲染的子节点，但我直接用document.querySelector()获取该子元素，返回的依旧是null，改用成通过ref获取，也是返回null。 我觉得应该是调用接口获取数据是异步操作，所以此时获取不到元素，我就在获取子元素的外边套了
vue(uniapp中)无法获取元素的高度宽度等属性解决方法,mounted无法获取元素高度等, Cannot read property ‘offsetHeight‘ of undefined
qq_35715551的博客
09-01 4949
请问你们是不是跟我一样,在mounted中无法获取到元素宽高,总是报未定义啥的,在评论区告诉我一下下呗,或许你们有更好的方法也请告诉一下,我大白一个,发文章也是为了对遇到同样问题的小伙伴有所帮助 mounted() { console.log(this.$refs.height.offsetHeight) // Error in onLoad hook: "TypeError: Cannot read property 'offsetHeight' of undefined" }
小程序中获取元素节点
m0_70547044的博客
10-28 599
但在小程序或uni-app环境中，这些方法统统失效！因为小程序中没有浏览器 DOM，也不存在documentwindow这类全局对象。👉 换句话说：小程序没有 DOM 概念，只有“节点信息”或“组件实例”。在uni-app（包括微信小程序端）中，要想获取页面元素或组件引用，必须使用类型获取方式可否用$refs说明自定义组件✅ 可以返回组件实例原生节点<view>❌ 不行返回节点信息对象场景推荐方法获取节点宽高、坐标获取滚动位置获取自定义组件实例组合使用（复杂页面）🔁。
uniapp获取元素的信息
abc2944069953的博客
09-25 2189
要在页面加载完成后才能获取到元素信息，所以代码要放在onReady中。
uniapp 选择元素,操作元素属性
lqk11的专栏
05-26 9015
const query = uni.createSelectorQuery().in(this); query.select('#userList_1').boundingClientRect(data => { console.log("得到布局位置信息" + JSON.stringify(data)); console.log("节点离页面顶部的距离为" + da...
uniapp中uview组件中u-input格式化后赋值踩坑
weixin_45392774的博客
07-31 984
摘要：在使用uniapp开发安卓App时，u-input组件输入超过5位小数需保留5位的问题。研究发现，直接通过v-model双向绑定无法实现小数位保留，需借助$nextTick延迟处理。原因在于v-model的数据视图更新是异步的，而u-input组件内部存在额外状态维护逻辑，同步修改会被覆盖。通过$nextTick等待组件完成内部处理后更新数据，才能确保格式化生效。这表明双向绑定不等于同步更新，在复杂组件中需考虑异步更新机制。
踩坑日记 uniapp 底部 tabber遮挡住购物车结算
一名全栈小白的博客
10-01 1008
踩坑日记 uniapp 底部 tabber遮挡住购物车结算。在小程序上tabbar没有将固定栏遮挡，如果直接调高，浏览器H5页面是对了，但在小程序上面离底部的定位就太高了。
uniapp开发微信小程序自定义顶部导航栏
热门推荐
m0_55258023的博客
07-14 1万+
uniapp开发微信小程序自定义顶部导航栏
uniapp—封装多个全局组件,推荐使用easycom
cy1502的博客
03-22 2300
uniapp真机调试vue.use注册自定义组件不生效
uniapp 组件获取页面参数(props)
fakeend的博客
01-18 2532
跳转前的界面（界面的url:…/subpage/Agreement/Agreement.vue），设置一个全局变量data_t。在页面调用组件时内传参的地方—>:IfConfrim=“ifConfrim”
在微信小程序中获取某个view的信息位置
一只会喊666的咸鱼的博客
09-11 4182
<view> <text class="title" id="nav">导航一</text> </view> 例如：获取这个view的信息位置 wx.createSelectorQuery().select('#nav').boundingClientRect(function(res){ console.log(res) }).exec() 我们得到返回结果：如图 PS：selector类似于 CSS 的选择器，但仅支持下.
uniapp获取子组件中的方法，vue
weixin_53385000的博客
05-14 2749
uniapp获取子组件中的方法，vue 在父组件中调用子组件，并获取使用子组件中的方法，我通过ref来绑定子组件。 代码： 子组件部分 <template> <view> 我是子组件 </view> </template> <script> export default { data() { return { }; }, methods: { init() { console.log('在父组
在uniapp开发中，自定义属性data-index，值的问题
User_XuKang的博客
10-29 3554
在一个按钮中如果有自定义属性的值，又要传的参数值，那我们应该怎么接受？ 代码如下： <template> <view> <button type="default" data-index='111' @click="add(1,$event)">点击</button> </view> </template> <script> export default { data() { return {
uni-app获取元素高度等信息，并设置元素top信息
DOM曼珠沙华的博客
07-22 1万+
本文主要简介uni-app获取元素信息及设置信息等 获取元素高度 可查看官方文档 mounted() { const query = uni.createSelectorQuery().in(this); query.select('#editor').boundingClientRect(data => { console.log(data) }).exec(); }, 这里的data用于获取这个元素大小及位置信息， 获取的值data如下： 设置元素的位置 设置.
uniapp 根据后台返回的id取数组中对应的值
weixin_43886375的博客
12-28 2705
举例下面是详情页接口返回案件类型 mainTypeId指的是大类的id subclassId指的是小类的id。已知大类和小类id 后台都返回了 怎么取对应的值呢 这个时候我们会用到。大类获取接口返回的数据如下。小类获取接口返回的数据如下。
uni-app 如何全局设置,获取app.vue里面的值
eren_yeger的博客
10-09 1244
在globalData里设置一个值。在页面中通过getApp()获取。
uniapp——第3篇：自定义组件、组件间传数据
m0_73991249的博客
03-17 2990
刚刚子组件自定义了一个事件，那么就需要在父组件里去触发这么一个自定义事件，一触发了，就能拿到子组件的数据值前面我们也学过，页面对页面之间发送参数数据的时候，是通过事件对象获取的数据值；那么子组件传父组件一样，在父组件里当触发了自定义事件之后，绑定执行一个函数，这个函数里调用【事件对象】参数，就能获取到子组件的值翻译大白话：败家仔的死党、姐弟帮他发了条短信给败家子的父母，败家子的父母一看短信：“WTF？儿子出车祸了？！
uniapp中uview组件库中的LineProgress 线形进度条 的使用方法
最新发布
11-04
假设我们在一个vue单文件组件中使用： 首先，在template部分： <u-line-progress :percent="progressValue"></u-line-progress> 然后，在script部分，我们需要定义progressValue。根据引用[1]的经验，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值