目錄 方法1： 利用ref實現錨點定位 前面的廢話文學 解決問題的方法 1. setup函數內定義變量 2. 動態獲取ref并存放到eleRefs數組當中 3. 滾動到特定的ref位置 方法2: 利用a標簽實現錨點定位（

目錄

• 方法1： 利用ref實現錨點定位 前面的廢話文學
• 解決問題的方法
• 1. setup函數內定義變量
• 2. 動態獲取ref并存放到eleRefs數組當中
• 3. 滾動到特定的ref位置
• 方法2: 利用a標簽實現錨點定位（滾動響應）
• 第二次的廢話文學
• 解決問題的方法
• 2.滾動響應
• 總結

方法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="http://news.558idc.com/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="http://news.558idc.com/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  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

總結

到此這篇關于vue3錨點定位兩種實現方式的文章就介紹到這了,更多相關vue3錨點定位內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！