PHP前端开发

uniapp如何实现锚点跳转

百变鹏仔 2个月前 (11-21) #uniapp
文章标签 跳转
uniapp实现锚点跳转的方法:将uniapp的【uni.createselectorquery()】方法与【uni.pagescrollto(object)】方法结合使用即可。

本教程操作环境: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>            <view>文章区域。。。</view>            <view>评论区域。。。</view>      </view></template>togglePosition(){      if(this.positionSelect){            this.positionSelect=false            //从评论区域回到顶部            uni.createSelectorQuery().select('.comment-content').boundingClientRect(data=&gt;{//目标位置的节点:类或者id                  uni.createSelectorQuery().select(".arc-content").boundingClientRect(res=&gt;{//最外层盒子的节点:类或者id                        uni.pageScrollTo({                              duration: 100,//过渡时间                              scrollTop:res.top - data.top  ,//返回顶部的top值                        })                  }).exec()            }).exec();      }else{            this.positionSelect=true            //从当前位置到达评论区域            uni.createSelectorQuery().select('.comment-content').boundingClientRect(data=&gt;{//目标位置的节点:类或者id                  uni.createSelectorQuery().select(".arc-content").boundingClientRect(res=&gt;{//最外层盒子的节点:类或者id                        uni.pageScrollTo({                              duration: 100,//过渡时间                              scrollTop:data.top - res.top  ,//到达距离顶部的top值                        })                  }).exec()            }).exec();      }},

相关免费学习推荐:编程视频