项目需求:点击类型后切换到对应页面内容并滚动到对应到位置(具体项目是有各个时间段的数据 然后要求滚动到现在的时间段)
方式一:使用uniapp的uni.pageScrollTo
all:
uni.createSelectorQuery().select("#child").boundingClientRect(data=>{
uni.createSelectorQuery().select("#father").boundingClientRect((res)=>{
uni.pageScrollTo({
duration:0,
scrollTop:res.top - data.top
})
}).exec()
}).exec();
其实下面这步完全可以使id为child的元素滚动到顶部,但如果你先手动进行页面滚动之后会产生偏移,因为滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
uni.createSelectorQuery().select("#child").boundingClientRect((res)=>{
uni.pageScrollTo({
duration:0,
scrollTop:res.top
})
}).exec()
方式二:使用js方式
let PageId = document.querySelector('#page'+s) //('#page'+s)为id,
PageId.scrollIntoView({ behavior:"smooth", block: "start", inline: "start"})
简单来说 就是绑定id 之后用scrollIntoView()方法属性进行滚动
结果就是点击大运分析,显示此列表并滚动到此时间段内容
此知识点原文:详细介绍scrollIntoView()方法属性_永远的新手的博客-CSDN博客_scrollintoview