最近用uniapp写的一个小程序中用到了类似于锚点定位的功能,做一个总结
效果
下方为实际用到的方法
第一步:先给元素定义上id
第二步:使用uni.createSelectorQuery().select(id).boundingClientRect
// 锚点定位
toHref(id) {
let thas = this
// 先定位到顶方
uni.pageScrollTo({
scrollTop: 0,
duration: 0
});
// 再调用此方法回到相应位置 id为项目中要回到指定位置的元素的id
uni.createSelectorQuery().select(id).boundingClientRect(function(rect){
console.log(rect, 'rect')
uni.pageScrollTo({
scrollTop: rect.top,
duration: 300
});
// rect.id // 节点的ID
// rect.dataset // 节点的dataset
// rect.left // 节点的左边界坐标
// rect.right // 节点的右边界坐标
// rect.top // 节点的上边界坐标
// rect.bottom // 节点的下边界坐标
// rect.width // 节点的宽度
// rect.height // 节点的高度
}).exec()
},
网友评论