vue3锚点定位两种实现方式示例.docx

第

vue3锚点定位两种实现方式示例

目录方法1：利用ref实现锚点定位前面的废话文学解决问题的方法1.setup函数内定义变量2.动态获取ref并存放到eleRefs数组当中3.滚动到特定的ref位置方法2:利用a标签实现锚点定位（滚动响应）第二次的废话文学解决问题的方法2.滚动响应总结

方法1：利用ref实现锚点定位前面的废话文学

说到锚点定位，很多人第一时间会想到a标签。但是a标签实现的锚点定位并不是那么的完美，特别是在hash模式下。

对我而言，vue3的ref就实在是太完美了。

解决问题的方法

很多情况下，我们会循环一定格式的数据对页面进行渲染，然后再有锚点定位的需求。那么我们该怎么去做呢？

1.setup函数内定义变量

consteleRefs=ref([]);

constsetRef=(el)={

if(el){

eleRefs.value.push(el);

//获取变量值

console.log(eleRefs.value[0])

2.动态获取ref并存放到eleRefs数组当中

templatev-for=(item,index)indata.catalogue

div:id=part+item.id:ref=setRef

div

templatev-for=(j,k)initem.picUrls:key=k

img:src=jalt=

/template

/div

templatev-for=(i,ind)initem.children

div:id=part+i.id:ref=setRef

templatev-for=(j,k)ini.picUrls:key=k

img:src=jalt=

/template

/div

/template

/div

/template

3.滚动到特定的ref位置

eleRefs.value[0].scrollIntoView({block:start,behavior:smooth});

over

方法2:利用a标签实现锚点定位（滚动响应）

第二次的废话文学

小编想了，还是想把a标签的锚点定位也记录一下。

无论是PC端、移动端,还是APP、小程序，只要涉及长篇文章/画册、tab切换等的都可能会有锚点定位的需求。我们前端就需要做到点击锚点能定位，滚动页面能响应。

解决问题的方法

1.a标签定位到指定位置

//锚记

ahref=#siterel=externalnofollow点击此处到目标位置/a

//锚记位置

divid=site/div

2.滚动响应

监听滚动事件

letcurrSite=document.documentElement.scrollTop||document.body.scrollTop//document.documentElement.scrollTop//当前滚动位置

letwindowHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight//视口高度

//获取元素信息

letele=document.getElementById(site)

leteleTop=ele.offsetTop//元素距页面顶部高度（头部）

leteleHeight=ele.clientHeight//元素高度

leteleBot=eleHeight+eleTop//元素底部距页面顶部高度（尾部）

/*判断元素是否在可视区域：

1.元素内嵌可视区域（首尾均在可视区域内）

2.元素外嵌可视区域（首位均在可视区域外）

3.元素头部在可视区域内，尾部在可视区域外

if(eleTop=currSiteeleTopcurrSite+windowHeight||(eleBotcurrSiteeleBotcurrSite+windowHeight)||(eleTopecurrSiteeleBotcurrSite+windowHeight)){

//元素在可视区域