Uniapp's method of obtaining dom nodes: 1. Get the first node matching the selector through the "let dom=query.select(selector)" method; 2. Use "letdoms=query.selectAll(selector)" " method to get all nodes.
The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, thinkpad t480 computer.
Recommended (free): uni-app development tutorial
uni-app Obtain DOM node
[Reference official website: https://uniapp.dcloud.io/api/ui/nodes-info?id=selectorqueryexec】
1. How to obtain the SelectorQuery object instance:
let query=uni.createSelectorQuery();
Function: Return a SelectorQuery object Instance, this instance is used to query the information of DOM nodes.
Notes:
(1) This method needs to be called after the life cycle is mounted.
(2) nvue technology does not support this method.
2. How to get the DOM node:
1. Get the first node that matches the selector:
let dom=query.select(selector)
2. Get all the nodes that match the selector:
letdoms=query.selectAll（selector）
Both the above two methods return NodesRef object instance, which is used to obtain DOM node information.
3. How to get the information of DOM nodes: (take doms as an example)
1. Get the layout position information of DOM nodes:
doms.boundingClienRect(function(res){
//res:{left,top,right,bottom,width,height}
}).exec(function(){
//上述布局位置信息获取成功后执行的回调函数
})2. Get the information of DOM nodes Scroll position information:
doms.scrollOffset(function(){
//res:{scrollLeft,scrollTop}
}).exec(function(){
//上述滚动位置信息获取成功后执行的回调函数
})3. Get all information of DOM nodes:
doms.fields({
rect:true, //是否返回节点布局位置信息{left,top,right,bottom}
size:true, //是否返回节点尺寸信息{width，height}
scrollOffset:true //是否返回节点滚动信息{scrollLeft,scrollTop}
},function(res){
//res 可以返回第一个参数对象中指定为true的相关信息
}).exec(function(){
//上述节点信息获取成功后执行的回调函数
})4. Code examples
1. Example 1: There are multiple in For nodes whose class name is leftItem, how to obtain the distance from the top of these nodes and assign these distances to an array named leftItemTop that has been defined in the data area.
uni.createSelectorQuery().selectAll(".leftItem").boundingClienRect(res=>{
this.leftItemTop=res.map(item=>item.top)
}).exec(()=>{
console.log(this.leftItemTop)
})2. Example 2: There are multiple nodes named rightItem in
uni.createSelectorQuery().selectAll(".rightItem").fields({
size:true
},res=>{
this.rightItemHeight=res.map(item=>{item.height})
}).exec(()=>{
console.log(this.rightItemHeight)
})5. Asynchronous problems caused by data rendering DOM:
[Reference official website: https://cn.vuejs.org/v2/api/#vm-nextTick]
[Recommended reading: https://segmentfault.com/a/1190000012861862]
**Question:**The variable temp in a certain data area affects the rendering of the DOM structure, and it is specified that after the variable is updated Another operation needs to be performed until the DOM structure is re-rendered. How can these other operations ensure that these other operations occur only after the DOM structure is re-rendered?
Solution: These operations that require the DOM structure to be re-rendered must be written in the callback function in the format of this&nextTick(function(){}).
<block v-for="(item,index) in domData">
<view class="domItem">{{item.title}}</view>
</block>Let’s just say that the above structure is a structure driven by data domData. The variable domData needs to obtain the necessary data from the interface first and then render it into the DOM structure.
data(){
return{
domData:[], //用于储存从接口中获取的DOM数据
domItemWidth:[] //用于储存获取的DOM结构的宽度
}
}When the variable domData gets the data from the interface, it must also ensure that the DOM structure is successfully rendered before the width of these structures can be obtained. Therefore, subsequent operations must use this.nextTick(function(){ }), which is written inside the callback function of this.nextTick(function(){}).
The code for the above example is as follows:
uni.request({
url:"http://localhost:8080/......",
data:{.....},
success:res=>{
this.domData=res.data;
this.nextTick(()=>{//该格式保证了domData已经得到接口数据并成功渲染DOM结构
uni.createSelectorQuery().selectAll(".domItem").fields({
size:true
},res=>{
this.domItemWidth=res.map(item=>item.width)
}).exec(()=>{
console.log(this.domItemWidth)
})
})
}
})The above is the detailed content of How to get dom node in uniapp. For more information, please follow other related articles on the PHP Chinese website!
The difference between flutter and uniapp
How to create a web page in python
How to download and save today's headline videos
What is the difference between original screen and assembled screen?
Self-study for beginners in C language with zero foundation
How to get the length of an array in C language
How long does it take for Douyin recharge to arrive?
The difference between vue3.0 and 2.0
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
