[vue3] Posicionamiento del punto de anclaje (dos implementaciones)

Método 1: use ref para realizar el posicionamiento del punto de anclaje

literatura de mierda por delante

Cuando se trata de posicionamiento de anclaje, muchas personas piensan inmediatamente en una etiqueta. Pero el posicionamiento de anclaje logrado por la etiqueta a no es tan perfecto, especialmente en modo hash.
Para mí, la referencia de vue3 es perfecta.

manera de resolver el problema

En muchos casos, haremos un bucle de datos en un determinado formato para representar la página, y luego existe la necesidad de posicionar el punto de anclaje. Entonces, ¿cómo lo hacemos?

1. Definir variables en la función de configuración

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

2. Obtenga ref dinámicamente y guárdelo en la matriz 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. Desplácese a una posición de referencia específica

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

encima

Método 2: use una etiqueta para lograr el posicionamiento del ancla (respuesta de desplazamiento)

segunda vez literatura sin sentido

El editor lo pensó, y todavía quiero registrar el posicionamiento del punto de anclaje de la etiqueta a.
Ya sea que se trate de una PC, un dispositivo móvil o una aplicación, programas pequeños, siempre que se trate de artículos largos/libros ilustrados, cambio de pestañas, etc., puede haber 锚点定位necesidades. Nuestra interfaz debe poder hacer clic en el punto de anclaje para ubicarlo y desplazarse por la página para responder.

manera de resolver el problema

1. La etiqueta a se encuentra en la posición especificada

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

2. Desplazamiento receptivo

Escuche los eventos de desplazamiento

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{
	// 元素不在可视区域
}

encima