2021-08-19

最新推荐文章于 2024-09-11 16:07:08 发布

weixin_45774322

最新推荐文章于 2024-09-11 16:07:08 发布

阅读量62

点赞数

文章标签： js css html

本文链接：https://blog.csdn.net/weixin_45774322/article/details/119800173

版权

uni-app页面如何实现描点定位

实现原理
uni-app相关api提供了dom元素距离窗口的位置参数(top,bottom,left,right等),利用最外层元素相与目标元素同时相对于窗口顶部的距离的差值, 从而获取页面需要滚动的距离
参考api

uni.createSelectorQuery() //创建一个SelectorQuery对象
selectorQuery.select(selector)//dom节点选择
boundingClientRect().exec()//

<!-- 模板部分 -->
<template>
	<view class='container'>
		<view class='target_1'></view>
		<view class='target_2'></view>
		<view class='target_3'></view>
		<view class='target_4'></view>
	</view>
	<view @click='goTargetPosition('target_4')'>去那里</view>
</template>

//js部分
goTargetPosition(params){
	uni.createSelectorQuery().select("."+params).boundingClientRect(data=>{//目标元素
	
		uni.createSelectorQuery().select(".container").boundingClientRect(res=>{//最外层元素
			uni.pageScrollTo({
				duration:300,
				scrollTop: Math.abs(res.top - data.top)//页面需要滚动的距离
			)})
		}).exec();
	}).exec();
}