uniapp实现锚点跳转 _实现

丈夫志四海，万里犹比邻。这篇文章主要讲述uniapp实现锚点跳转相关的知识，希望能为你提供帮助。
将uniapp的uni.createSelectorQuery()方法与uni.pageScrollTo(OBJECT)方法结合使用【uniapp实现锚点跳转】更详细用法见官方文档：
uni.createSelectorQuery()方法：https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery
uni.pageScrollTo(OBJECT)方法：https://uniapp.dcloud.io/api/ui/scroll?id=pagescrollto
核心代码

//从当前位置到达目标位置 uni.createSelectorQuery().select(‘.comment-content‘).boundingClientRect(data=https://www.songbingjia.com/android/> {//目标位置的节点：类或者id uni.createSelectorQuery().select(" .arc-content" ).boundingClientRect(res=> {//最外层盒子的节点：类或者id uni.pageScrollTo({ duration: 100,//过渡时间 scrollTop:data.top - res.top,//到达距离顶部的top值 }) }).exec() }).exec();

代码示例

< template> < view class=" arc-content" id=" arc-content" > < view class=" info-content" > 文章区域。。。< /view> < view class=" comment-content" id=" comment-content" > 评论区域。。。< /view> < /view> < /template> togglePosition(){ if(this.positionSelect){ this.positionSelect=false//从评论区域回到顶部 uni.createSelectorQuery().select(‘.comment-content‘).boundingClientRect(data=https://www.songbingjia.com/android/> {//目标位置的节点：类或者id uni.createSelectorQuery().select(" .arc-content" ).boundingClientRect(res=> {//最外层盒子的节点：类或者id uni.pageScrollTo({ duration: 100,//过渡时间 scrollTop:res.top - data.top,//返回顶部的top值 }) }).exec() }).exec(); }else{ this.positionSelect=true//从当前位置到达评论区域 uni.createSelectorQuery().select(‘.comment-content‘).boundingClientRect(data=> {//目标位置的节点：类或者id uni.createSelectorQuery().select(" .arc-content" ).boundingClientRect(res=> {//最外层盒子的节点：类或者id uni.pageScrollTo({ duration: 100,//过渡时间 scrollTop:data.top - res.top,//到达距离顶部的top值 }) }).exec() }).exec(); } },