【开发微信小程序中碰到的】
这里是动态绑定的id，循环的list有长度，不是空，并且通过动态id写css也有效果
这里在onReady中获取节点信息却不输出，不知道为什么
1***@qq.com
- 发布：2019-08-13 11:14
- 更新：2022-06-20 18:32
- 阅读：13310
uni-app无法通过动态绑定的id获取节点信息
分类：uni-app
这里是动态绑定的id，循环的list有长度，不是空，并且通过动态id写css也有效果
这里在onReady中获取节点信息却不输出，不知道为什么
算了，分享个曲折解决方法，首先V-for生生成的dom绑定id，然后同时带有：id绑定id 和一个class，然后query.selectAll(".lrows").boundingClientRect(data =>{}),对data进行遍历，然后根据id取对应当元素。虽然繁琐了点
https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery
使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。
自定义组件编译模式（默认模式），需要使用到 selectorQuery.in 方法。
-
-
-
-
回复 陈晨1:
<scroll-view :id="'cc'+index" scroll-y style="height: 95rpx;">
我指定高度，可以获取到。
<scroll-view :id="'cc'+index" scroll-y> 指定高度去掉以后，获取到的height为0
在scroll-view中是有个动态列表的，我确定不了这个scroll-view具体多高，现在能动态获取到吗？
按照下面这段代码，在不指定高度情况下，没法获取高度。
const query = uni.createSelectorQuery().select('#cc'+i).boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("得到布局ID" + data.id);
console.log("节点离页面顶部的距离为" + data.top);
console.log("节点离页面底部的距离为" + data.bottom);
console.log("高度" + data.height);
}).exec();
控制台打印结果
得到布局位置信息{"id":"cc6","dataset":{},"left":8.265625,"right":405.703125,"top":591.234375,"bottom":591.234375,"width":397.4375,"height":0}
maill.vue:193 得到布局IDcc6
maill.vue:194 节点离页面顶部的距离为591.234375
maill.vue:195 节点离页面底部的距离为591.234375
maill.vue:196 高度02019-11-03 11:59
this.$nextTick(function(){
let info = uni.createSelectorQuery().select(".content-wrapper");
info.boundingClientRect(function(data) { //data - 各种参数
console.log(data) // 获取元素宽度
}).exec()
})
this.$nextTick is not a function 在 computed 里
大佬们，没用啊，这个动态 :id 的dom 就是获取不到
这个不能绑定id,好像是uni-app不能设置id这个字段,文档写的不严谨.设置一个动态的class就可以了.取动态的class完美解决
startTranslate(text,itemId) {
var query = uni.createSelectorQuery().in(this).select('.'+itemId)
query.boundingClientRect(res => {
console.log(res)
}).exec()
6***@qq.com
您好，除过这种方法还有其他的吗？
2019-11-01 19:53
s***@foxmail.com
回复 6***@qq.com: 没了。提前跟进v-for生成的index合理拼接id就行
2019-11-12 10:01
1***@qq.com
这个思路好,麻烦点但是实用啊
2021-03-29 15:33