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

来自:网络
时间:2023-07-25
阅读:
目录

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

说到锚点定位,很多人第一时间会想到 a标签。但是a标签实现的锚点定位并不是那么的完美,特别是在hash模式下。
对我而言,vue3的ref就实在是太完美了。

解决问题的方法

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

1. setup函数内定义变量

const eleRefs = ref([]);
const setRef = (el) => {
  if (el) {
    eleRefs.value.push(el);
  }
};
//获取变量值
console.log(eleRefs.value[0])

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

 <template v-for="(item, index) in data.catalogue">
      <div class="part-cont" :id="'part' + item.id" :ref="setRef">
        <div class="part-box">
          <template v-for="(j, k) in item.picUrls" :key="k">
            <img :src="j" alt="">
          </template>
        </div>
        <template v-for="(i, ind) in item.children">
          <div :id="'part' + i.id" :ref="setRef" class="part-box">
            <template v-for="(j, k) in i.picUrls" :key="k">
              <img :src="j" alt="">
            </template>
          </div>
        </template>
      </div>
    </template>

3. 滚动到特定的ref位置

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

over

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

第二次的废话文学

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

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

解决问题的方法

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

// 锚记
	<a href="#site" rel="external nofollow" >点击此处到目标位置</a>
// 锚记位置
	<div id="site"></div>

2.滚动响应

监听滚动事件

let currSite = document.documentElement.scrollTop || document.body.scrollTop // document.documentElement.scrollTop  // 当前滚动位置
let windowHeight =window.innerHeight||document.documentElement.clientHeight || document.body.clientHeight  // 视口高度
 // 获取元素信息
 let ele = document.getElementById('site')
 let eleTop = ele.offsetTop // 元素距页面顶部高度(头部)
 let eleHeight = ele.clientHeight  // 元素高度
  let eleBot = eleHeight + eleTop  // 元素底部距页面顶部高度(尾部)
/* 判断元素是否在可视区域:
	1.元素内嵌可视区域(首尾均在可视区域内)
	2.元素外嵌可视区域(首位均在可视区域外)
	3.元素头部在可视区域内,尾部在可视区域外
*/
if(eleTop >= currSite &&eleTop < currSite + windowHeight || (eleBot  > currSite &&eleBot < currSite + windowHeight) || (eleTop e < currSite && eleBot > currSite + windowHeight)){
	 // 元素在可视区域
}else{
	// 元素不在可视区域
}

over

总结

返回顶部
顶部