精华内容
下载资源
问答
  • 1.需要在动态dom节点生成后再获取dom节点 2.在this.$nextTick()方法中获取dom节点 onShow(){ this.getPageList().then(()=>{ //this.getPageList是我生成动态dom节点方法 this.$nextTick(function(){ ...

    uniapp无法获取动态dom节点解决方案
    1.需要在动态dom节点生成后再获取dom节点
    2.在this.$nextTick()方法中获取dom节点

    	onShow(){
    			this.getPageList().then(()=>{   //this.getPageList是我生成动态dom节点方法
    					this.$nextTick(function(){
    						const query = uni.createSelectorQuery().in(this);	
    				        //获取多个节点方式
    						  query.selectAll(".doBox").boundingClientRect(data=>{
    		                       console.log('获取多个dom节点:',data)
    						  }).exec();
    						   //获取单个节点方式
    						  query.select(".doBox").boundingClientRect(data=>{
    		                       console.log('获取单个dom节点:',data)
    						  }).exec(); 
    					})
    			})
    		}
    
    展开全文
  • uni-app 获取 DOM 节点的相关信息

    千次阅读 2020-05-02 22:46:21
    uni-app 获取 DOM 节点的相关信息 一、如何获取 SelectorQuery 对象实例 let query = uni.createSelectorQuery(); 功能:返回一个selectorQuery对象的实例,该实例用来查询DOM...二、如何获取DOM节点 1、获取匹配...

    uni-app 获取 DOM 节点的相关信息

    一、如何获取 SelectorQuery 对象实例

    let  query  = uni.createSelectorQuery();
    

    功能:返回一个selectorQuery对象的实例,该实例用来查询DOM节点的信息。
    注意事项:
    (1)该方法需要在生命周期mounted后进行调用。
    (2)nvue不支持该方法。

    二、如何获取DOM节点

    1、获取匹配选择器的第一个节点:

    let dom = query.select(selector)
    

    2、获取匹配选择器的所有节点

    let dom = query.selectAll(selector)
    

    上述两个方法均返回NodesRef对象实例,该实例用来获取DOM节点多少信息。

    三、如何获取DOM节点的信息:(以doms为实例)

    1、获取DOM节点的布局位置信息:

    doms.boundingClientRect(function(res){
    	//res:{left,top,right,bottom,width,height}
    }).exec(function(){
    	//上述布局位置信息获取成功后执行的回调函数
    })
    

    2、获取DOM节点的滚动位置信息:

    doms.scrollOffset(function(res){
    	//res:{scrollLeft,scrollTop}
    })exec(function(){
    	//上述滚动位置信息获取成功后执行的回调函数
    })
    

    3、获取DOM节点的所有信息

    doms.fields({
    	rect:true   //是否返回节点布局位置信息{left,top,right,bottomn}
    	size:true   //是否返回节点尺寸信息{width,height}
    	scrollOffset:true  //是否返回节点滚动信息{scrollLeft,scrollTop}
    },function(res){
    	//res可以返回第一个参数对象中制定为true的相关信息
    }).exec(function(function){
    	//上述节点信息获取成功后执行的回调函数
    })
    

    四、代码示例

    1、例1:中有多个类名为leftitem的节点,如何获取这些节点距离顶部的距离,并将这些激励赋给一个在数据区已经定义好名为;leftitemTop的数组。

    uni.createSelectorQuery().selectAll(“.rightItem”).fields({
    	size:true
    	},res-=>{
    		this.rightitemHeight=res.map(item=>item.lenght);;
    	}).exec(()=>{
    		console.log(this.rightitemHeight);
    	})
    

    五、数据熏染DOM造成的异步问题

    【参考官网:https://cn.vuejs.org/v2/api/#vm-nextTick】
    【推荐阅读:https://segmentfault.com/a/1190000012861862】
    问题:
    某个数据区的变量temp将影响DOM结构的渲染,且规定该变量更新后知道DOM结构重新渲染完成后还需要做一个其它的操作,则这些其它的操作如何在保证在结构重新渲染完成后才发生?

    解决方案:
    这次为需要DOM结构重新渲染完后才能后完成后才发生的操作必须写在this.$nextTick(function(){})格式的回调函数中
    例:
    中有一组节点要根据调取接口额数据才能渲染出来,调取接口后数据存储在数据区中一个名为domData变量中。要求当DOM结构渲染成功后,获取每一个对象的宽度并将这些宽度储存在数据区中一个名为domitemWidth的数字中。

    <block v-for="(item,index)in domData">
    	<view class="domitem">{{item.title}}</view>
    </block>
    

    我们就说上述结构基于数据donData驱动的结构,变量domData需要先从接口获取必要的数据,在渲染到DOM结构中。

    data(){return{
    	domData:[],   //用于储存从接口中获得的DOM数据
    	domitemWidth:[]  //用于储存获取的DOM结构的宽度
    	}
    }
    

    当变量domData从接口中得到数据后,还必须保证成功渲染DOm接口之后,才能去获取这些结构的宽度,因此要将后续的操作用this. n e x t T i c k ( f u n c t i o n ( ) ) 包 裹 起 来 , 即 书 写 在 t h i s . nextTick(function(){})包裹起来,即书写在this. nextTick(function())this.nextTick()的回调函数内部。

    上述实例的代码如下所示:

    uni.request({
    	url:'/api/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);
    			})
    		})
    	}
    })
    				
    
    展开全文
  • uni-app 如何获取DOM 节点

    万次阅读 2020-05-02 21:57:31
    【参考官网:https://uniapp.dcloud.io/api/ui/nodes-info?id=selectorqueryexec】 ...功能:返回一个SelectorQuery对象的实例,该实例用来查询DOM节点的信息。 注意事项: (1)该方法需要在生命周期mount...

    【参考官网:https://uniapp.dcloud.io/api/ui/nodes-info?id=selectorqueryexec】
    一、如何获取SelectorQuery对象实例:
    let query=uni.createSelectorQuery();
    功能:返回一个SelectorQuery对象的实例,该实例用来查询DOM节点的信息。
    注意事项:
    (1)该方法需要在生命周期mounted后进行调用。
    (2)nvue技术不支持该方法。
    二、如何获取DOM节点:
    1、获取匹配选择器的第一个节点:
    let dom=query.select(selector)
    2、获取匹配选择器的所有节点:
    letdoms=query.selectAll(selector)
    上述两个方法均返回NodesRef对象实例,该实例用来获取DOM节点的信息。
    三、如何获取DOM节点的信息:(以doms为例)
    1、获取DOM节点的布局位置信息:

    doms.boundingClienRect(function(res){
    	//res:{left,top,right,bottom,width,height}
    }).exec(function(){
    	//上述布局位置信息获取成功后执行的回调函数
    })
    

    2、获取DOM节点的滚动位置信息:

    doms.scrollOffset(function(){
    	//res:{scrollLeft,scrollTop}
    }).exec(function(){
    	//上述滚动位置信息获取成功后执行的回调函数
    })
    

    3、获取DOM节点的所有信息:

    doms.fields({
    	rect:true,   //是否返回节点布局位置信息{left,top,right,bottom}
    	size:true,  //是否返回节点尺寸信息{width,height}
    	scrollOffset:true //是否返回节点滚动信息{scrollLeft,scrollTop}
    },function(res){
    	//res 可以返回第一个参数对象中指定为true的相关信息
    }).exec(function(){
    	//上述节点信息获取成功后执行的回调函数
    })
    

    四、代码实例
    1、例1: <template>中有多个类名为leftItem的节点,如何获取这些节点距离顶部的距离,并将这些距离赋给一个在数据区已经定义好的名为leftItemTop的数组。

    uni.createSelectorQuery().selectAll(".leftItem").boundingClienRect(res=>{
    	this.leftItemTop=res.map(item=>item.top)
    }).exec(()=>{
    	console.log(this.leftItemTop)
    })
    

    2、例2:<template:>中有多个类名为rightItem的节点,如何获取这些节点的高度,并将这些高度赋值给一个在数据区已经定义好的名为rightItem的数组。

    uni.createSelectorQuery().selectAll(".rightItem").fields({
    	size:true
    },res=>{
    	this.rightItemHeight=res.map(item=>{item.height})
    }).exec(()=>{
    	console.log(this.rightItemHeight)
    })	
    

    五、数据渲染DOM造成的异步问题:
    【参考官网:https://cn.vuejs.org/v2/api/#vm-nextTick】
    【推荐阅读:https://segmentfault.com/a/1190000012861862】
    **问题:**某个数据区的变量temp讲影响DOM结构的渲染,且规定该变量更新后直到DOM结构重新渲染完成后还需要做一个其他的操作,则这些其他的操作如何保证在DOM结构重新渲染完成后才发生?
    解决方案:这些需要DOM结构重新渲染完成后才发生的操作必须写在this&nextTick(function(){})格式的回调函数中。

    <block v-for="(item,index) in domData">
    	<view class="domItem">{{item.title}}</view>
    </block>
    

    我们就说上述结构是基于数据domData驱动的结构,变量domData需要先从接口中获取必要的数据,再渲染到DOM结构中。

    data(){
    	return{
    		domData:[], //用于储存从接口中获取的DOM数据
    		domItemWidth:[] //用于储存获取的DOM结构的宽度
    	}
    }
    

    当变量domData从接口中得到数据后,还必须保证成功渲染了DOM结构之后,才能去获取这些结构的宽度,因此要将后续的操作用this.nextTick(function(){})包裹起来 ,既书写在this.nextTick(function(){})的回调函数内部。
    上述事例的代码如下:

    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)
    			})
    		})
    	}
    })
    
    展开全文
  • uniApp动态修改节点样式

    千次阅读 2020-10-28 11:36:16
    uniApp项目中没有windouw对象,所以通过document不能直接获取dom节点,vue的refs只对自定义组件有效,对uniapp中的标签不生效。 查看uniapp官网有一个uni.createSelectorQuery() API;可以通过这个属性获取标签的...

    在uniApp项目中没有windouw对象,所以通过document不能直接获取dom节点,vue的refs只对自定义组件有效,对uniapp中的标签不生效。
    查看uniapp官网有一个uni.createSelectorQuery() API;可以通过这个属性获取标签的样式,在通过动态绑定样式来修改;

    下面是一个tab标签
    在这里插入图片描述

    // HTML
    <div class="tab" :class="{'activeTab':activeTab=='1'}" @click.stop="changeTab(0)">tab1</div>
    <div class="tab tab1" :class="{'activeTab':activeTab=='2'}" @click.stop="changeTab(1)">tab2</div>
    <div class="line_blue" :style="[{left: setLeft}]"></div>
    
    // js
    
    data(){
    	return{
    		activeTab: '1',
    		setLeft: 0
    	}
    },
    methods:{
    	changeTab(id) {
           this.activeTab = id + 1;
           let view = uni.createSelectorQuery().selectAll('.tab');
           view.fields({rect: true},data => {
                   this.setLeft = data[id].left - data[0].left + 'px'
               }).exec();
       }
    }
    
    
    展开全文
  • 小程序获取 dom节点 uni-app框架

    千次阅读 2020-09-23 21:52:13
    自定义组件 let outter = uni.createSelectorQuery().in(this).select('#outter'); outter.fields({size:true},data => { console.log(data.height... }).exec() 参考文档:https://uniapp.dcloud.io/api/ui/nodes-info
  • 在项目中碰到的问题,uniapp使用uni.createSelectorQuery().in()获取节点,但是始终无法获取到循环后的节点,后来加了一个setTimeout就解决了问题 //方法需要在生命周期mounted或者onReady后进行调用 onReady: ...
  • uniapp获取元素高度

    万次阅读 2020-06-03 11:02:06
    uniapp获取元素高度 官方文档 mounted() { const query = uni.createSelectorQuery().in(this); query.select('#editor').boundingClientRect(data => { console.log(data) }).exec(); },
  • Touchmove获取当前触摸的Dom节点 近期为自己的app增加一个通讯录首字母导航的功能,如下图蓝色框部分,需求很好理解,在手指触摸相应字母时,通讯录自动滚动到相应首字母的联系人。 image.png ...
  • uniapp 获取元素高度

    2021-08-18 10:24:27
    <view id="target">123</view> onLoad() { const query = uni.createSelectorQuery(); query.select('#target').boundingClientRect(data =>... console.log('11111111') ...
  • 新增人员后,返回到上一页,页面样式有问题,本以为直接对personList重新赋值就能让class的样式显示正常,结果不是,看来直接赋值,对v-for内的内容是不会重新渲染样式的。百度了很久,解决方法如下。...
  • uniApp项目中没有windouw对象,所以通过document不能直接获取dom节点,vue的refs只对自定义组件有效,对uniapp中的标签不生效。 查看uniapp官网有一个uni.createSelectorQuery() API;可以通过这个属性获取标签的...
  • [uCharts]:开启canvas2d模式,必须指定canvasId,否则会出现偶尔获取不到dom节点的问题! <template> //新增 id="canvasColumn" <view class="charts-box"> <qiun-data-charts type="pie" id=...
  • 在vue中操作dom元素节点的样式有好几种方式这里我总结了两种 第一种: 1.获取到元素节点(这里通过this.$refs获取元素节点) this.$refs.xxxxx.$el 2.操作元素的样式 this.$refs.num1Underline.$el.style.transform =...
  • 获取对应元素的大小及其相对于视窗的位置,返回一个包含left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的参数对象,除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。...
  • uniapp 获取元素高度 距离顶部高度等

    千次阅读 2020-12-30 13:56:56
    #the-id节点的上边界坐标 res[1].scrollTop // 显示区域的竖直滚动位置 // _this.height=res.windowHeight-res[0].top +'px' // =_this.height height=uni.getSystemInfoSync().screenHeight _this.viewHeight=...
  • uni-app操作DOM节点

    万次阅读 2019-03-01 16:37:13
    最近学到了一个比较好用的框架uni-app,可以做六端...//获取category-list的高度 let view = uni.createSelectorQuery().select('.category-list'); view.fields({ size: true }, data =&gt; { th...
  • 用weex的DOM模块和BindingX获取节点信息并制作动画效果 下方实例是用了uniapp的uni-nav-bar 组件(uniapp编译模式),控制下划线移动的动画效果 <template> <view> <uni-nav-bar :statusBar=...
  • const dom = weex.requireModule('dom') // #endif const result = dom.getComponentRect(this.$refs.examplebody, option => { console.log('getComponentRect:', option) this.$emit("getNavTab",...
  • const query = uni.createSelectorQuery().in(this); query.selectAll('.catelog').boundingClientRect(rects => { rects.forEach(rect => { // 这里的滚动触发 可能是1ms触发,由于有时间...
  • 官网例子链接:节点信息 https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery 完整代码示例 const query = uni.createSelectorQuery().in(this); query.select('#id').boundingClientRect(data =>...
  • uniapp获取元素页面信息的方法

    千次阅读 2020-12-28 16:37:21
    可以在这个实例上使用 select 等方法选择节点,并使用 boundingClientRect 等方法选择需要查询的信息。 需要注意的是: 使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。 一,selectorQuery....
  • 获取DOM元素信息 这里你想获取哪个的信息把id="target"或类放到哪里 <template> <view> <view > <view>Html</view> <view id="target">Css</view> <view">...
  • 从信息通知跳转到另一个页面的评论专区 ... ...const query = uni.createSelectorQuery().in(that);...query.select('#tab_1').boundingClientRect(data =>...console.log("节点离页面顶部的距离为1---" + data.
  • 查询节点信息的对象 selectorQuery.in(component) 将选择器的选取范围更改为自定义组件component内,返回一个SelectorQuery对象实例。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。 ...
  • uni-app 获取dom 多个相同类名

    千次阅读 2020-07-29 16:50:09
    let that = this setTimeout(() => { let query = wx.createSelectorQuery(); query.selectAll('.scroll-view').boundingClientRect() query.exec(function (res) { for (var i = 0; i &...
  • uniapp

    2020-05-07 14:56:15
    uni本身就不支持操作dom,但可以获取dom信息请用uni.createSelectorQuery() 使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。 !!自定义组件编译模式(默认模式),需要使用到 sel...
  • uni-app获取元素节点信息

    千次阅读 2020-10-18 13:31:25
    当前节点信息 处理函数 export function elementsAttr(ele,vm){ return new Promise((resolve,reject) => { let nodes= uni.createSelectorQuery().in(vm).selectAll(ele) nodes.boundingClientRect(cur=>...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 315
精华内容 126
关键字:

uniapp获取dom节点