一、domEle.getBoundingClientRect()

获取对应元素的大小及其相对于视窗的位置,返回一个包含left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的参数对象,除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。如下图:
在这里插入图片描述
视窗指的是能够显示页面内容的浏览器窗口。
该api详细说明可点击此链接查看Element.getBoundingClientRect()

**注:width、height包含内边距和边框,上下左右距离都是元素边境即边框到视窗距离,这些相对视窗距离值是会随着元素滚动位置改变而变化的并不是绝对的,这里要注意和元素的offsetTop属性的区别,offsetTop是当前元素距离顶部距离最近的"设置了position属性的"父元素的距离,如果没有设置的话就是针对于当前页面即body顶部的距离,这个距离值是不会随着页面滚动变化的,是绝对值。

特别注意:节点布局位置参数 top,常用于判断某个标签栏是否滚动到视窗顶部,top为0时,将其设置为悬浮,即相当于粘性布局position:sticky的功能。

想要搞清dom元素的clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop 这些属性,可看下这位大佬的解读:https://blog.csdn.net/qq_35430000/article/details/80277587

二、nodesRef.boundingClientRect(callback)

uniapp中小程序开发(h5开发是可以的)是无法获取dom对象以及对dom操作(目前就我所知,希望能有大佬纠正),但能够获取到节点的详细信息。

boundingClientRect()是获取节点布局位置信息:

this.$nextTick( () => {
	//必须先创建SelectorQuery对象的实例,该实例用来查询DOM节点的信息
	const query = uni.createSelectorQuery()
	//匹配选择器的第一个节点,selectAll匹配选择器的所有节点
	query.select('#scroll-area').boundingClientRect( rect => {
		//rect是包含元素大小、位置等数据的对象
		console.error(rect)
	}).exec(() => {
		//节点信息获取成功后执行的回调函数
	})
})

打印数据如图:
在这里插入图片描述
对应参数和第一部分功能一样,这个是uniapp官网参数说明:https://uniapp.dcloud.io/api/ui/nodes-info?id=nodesrefboundingclientrect

扩展:1.nodesRef.scrollOffset(res=>{//res:{scrollLeft,scrollTop}}).exec(): 获取节点滚动位置信息。2.nodesRef.fields({rect:true,//是否返回节点布局位置 size:true, //是否返回尺寸 scrollOffset:true, //是否返回滚动}, res => {res为指定为true的相关信息}).exec()

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐