目錄方法1： 利用ref實(shí)現(xiàn)錨點(diǎn)定位 前面的廢話(huà)文學(xué)解決問(wèn)題的方法1. setup函數(shù)內(nèi)定義變量2. 動(dòng)態(tài)獲取ref并存放到eleRefs數(shù)組當(dāng)中3. 滾動(dòng)到特定的ref位置方法2: 利用a標(biāo)簽實(shí)現(xiàn)錨點(diǎn)定位（滾動(dòng)響應(yīng)）第二次的廢話(huà)文學(xué)解決問(wèn)題的方法2.滾動(dòng)響應(yīng)總結(jié)方法1： 利用ref實(shí)現(xiàn)錨點(diǎn)定位 前面的廢話(huà)文學(xué)

說(shuō)到錨點(diǎn)定位，很多人第一時(shí)間會(huì)想到 a標(biāo)簽。但是a標(biāo)簽實(shí)現(xiàn)的錨點(diǎn)定位并不是那么的完美，特別是在hash模式下。對(duì)我而言，vue3的ref就實(shí)在是太完美了。

解決問(wèn)題的方法

很多情況下，我們會(huì)循環(huán)一定格式的數(shù)據(jù)對(duì)頁(yè)面進(jìn)行渲染，然后再有錨點(diǎn)定位的需求。那么我們?cè)撛趺慈プ瞿兀?/p>1. setup函數(shù)內(nèi)定義變量const eleRefs = ref([]);const setRef = (el) => { if (el) { eleRefs.value.push(el); }};//獲取變量值console.log(eleRefs.value[0])2. 動(dòng)態(tài)獲取ref并存放到eleRefs數(shù)組當(dāng)中 <template v-for='(item, index) in data.catalogue'> <div :id=''part' + item.id' :ref='setRef'><div class='part-box'> <template v-for='(j, k) in item.picUrls' :key='k'> <img :src='https://www.jb51.net/javascript/j'> </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='https://www.jb51.net/javascript/j'> </template> </div></template> </div> </template>3. 滾動(dòng)到特定的ref位置eleRefs.value[0].scrollIntoView({ block: 'start', behavior: 'smooth' });

over

方法2: 利用a標(biāo)簽實(shí)現(xiàn)錨點(diǎn)定位（滾動(dòng)響應(yīng)）第二次的廢話(huà)文學(xué)

小編想了，還是想把a(bǔ)標(biāo)簽的錨點(diǎn)定位也記錄一下。

無(wú)論是PC端、移動(dòng)端,還是APP、小程序，只要涉及長(zhǎng)篇文章/畫(huà)冊(cè)、tab切換等的都可能會(huì)有錨點(diǎn)定位的需求。我們前端就需要做到點(diǎn)擊錨點(diǎn)能定位，滾動(dòng)頁(yè)面能響應(yīng)。

解決問(wèn)題的方法

1. a標(biāo)簽 定位到指定位置

// 錨記<a rel='external nofollow' >點(diǎn)擊此處到目標(biāo)位置</a>// 錨記位置<div id='site'></div>2.滾動(dòng)響應(yīng)

監(jiān)聽(tīng)滾動(dòng)事件

let currSite = document.documentElement.scrollTop || document.body.scrollTop // document.documentElement.scrollTop // 當(dāng)前滾動(dòng)位置let windowHeight =window.innerHeight||document.documentElement.clientHeight || document.body.clientHeight // 視口高度 // 獲取元素信息 let ele = document.getElementById('site') let eleTop = ele.offsetTop // 元素距頁(yè)面頂部高度（頭部） let eleHeight = ele.clientHeight // 元素高度 let eleBot = eleHeight + eleTop // 元素底部距頁(yè)面頂部高度（尾部）/* 判斷元素是否在可視區(qū)域：1.元素內(nèi)嵌可視區(qū)域（首尾均在可視區(qū)域內(nèi)）2.元素外嵌可視區(qū)域（首位均在可視區(qū)域外）3.元素頭部在可視區(qū)域內(nèi)，尾部在可視區(qū)域外*/if(eleTop >= currSite &&eleTop < currSite + windowHeight || (eleBot > currSite &&eleBot < currSite + windowHeight) || (eleTop e < currSite && eleBot > currSite + windowHeight)){ // 元素在可視區(qū)域}else{// 元素不在可視區(qū)域}

over

總結(jié)

到此這篇關(guān)于vue3錨點(diǎn)定位兩種實(shí)現(xiàn)方式的文章就介紹到這了,更多相關(guān)vue3錨點(diǎn)定位內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！