本教程操作环境：windows7系统、uni-app2.5.1版本，Dell G3电脑。
推荐（免费）：uni-app开发教程
uniapp实现锚点跳转的方法：
将uniapp的uni.createSelectorQuery()方法与uni.pageScrollTo(OBJECT)方法结合使用
核心代码
//从当前位置到达目标位置
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();登录后复制代码示例
<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=>{//目标位置的节点：类或者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();
}
},登录后复制以上就是uniapp如何实现锚点跳转的详细内容，更多请关注悠悠之家其它相关文章！
发表评论 取消回复