vue中的錨點定位問題
更新時間:2022年09月16日 10:30:36 作者:女程序媛的修煉筆記
這篇文章主要介紹了vue中的錨點定位問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
vue錨點定位
錨點定位與平滑滾動反定位支持
代碼如下
html
<div style="display: flex;height: 442px;"> ? ? ? ? ? ? ? ? ? ? ? ?<el-tabs v-model="activeTabs" class="zxtabsStyle" tab-position="left" @tab-click="tabshandleClick"> ? ? ? ? ? ? ? ? ? ? ? ? <el-tab-pane label="主要致險情景" name="zxqj"></el-tab-pane> ? ? ? ? ? ? ? ? ? ? ? ? <el-tab-pane label="風(fēng)險防控基本要求" name="yq"></el-tab-pane> ? ? ? ? ? ? ? ? ? ? ? ? <el-tab-pane label="管理措施" name="glcs"></el-tab-pane> ? ? ? ? ? ? ? ? ? ? ? ?</el-tabs> ? ? ? ? ? ? ? ? ? ? ? ?<div> ?//要切換滾動的內(nèi)容區(qū)域 <div class="con_tab" ref="content"> ?? ?<div id="zxqj" class="conBlock">介紹</div> ?? ?<div id="yq" class="conBlock">課程目錄</div> ?? ?<div id="glcs" class="conBlock">課后福利</div> </div>
js
mounted(){ //1.mounted里面自動監(jiān)聽滾動事件 ? 代碼如下 this.$refs.content.onscroll = ()=>{ ? ? ?this.handleScroll(); ?} }, methods:{ ? ? ? ? handleScroll () { ? ? ?let scrollTop = this.$refs.content.scrollTop; ? ? ? let blocks = document.querySelectorAll('.conBlock'); ? ? ? blocks.forEach((item, index) => { ? ? ? ? console.log("blocks",item.id) ? ? ? ? ? if (scrollTop >= item.offsetTop) { ? ? ? ? ? ? ? this.activeTabs = item.id; ? ? ? ? ? } ? ? ? }) ? }, ? ? ? ? ?tabshandleClick(data){ ? ? ? ? ? ? console.log("data",data) ? ? ? ? ? ? let index=Number(data.index) ? ? let blocks = document.querySelectorAll('.conBlock'); ? ? let step = 40;//滾動步長 ? ? let currentScrollTop = this.$refs.content.scrollTop; ? ? let targetOffsetTop = blocks[index].offsetTop; ? ? console.log("currentScrollTop",currentScrollTop); ? ? console.log("targetOffsetTop",targetOffsetTop); ? ? if(currentScrollTop > targetOffsetTop){ ? ? ? ? const smoothUp = ()=>{ ? ? ? ? ? ? if(currentScrollTop >= targetOffsetTop){ ? ? ? ? ? ? ? ? if (currentScrollTop - targetOffsetTop >= step) { ? ? ? ? ? ? ? ? ? ? currentScrollTop -= step; ? ? ? ? ? ? ? ? ? ? setTimeout(smoothUp,1); ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? currentScrollTop = targetOffsetTop-step; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? this.$refs.content.scrollTop = currentScrollTop; ? ? ? ? ? ? } ? ? ? ? }; ? ? ? ? smoothUp(); ? ? }else{ ? ? ? ? const smoothDown = ()=>{ ? ? ? ? ? ? if (currentScrollTop <= targetOffsetTop) { ? ? ? ? ? ? ? ? // 如果和目標(biāo)相差距離大于等于step 就跳 step ? ? ? ? ? ? ? ? if (targetOffsetTop - currentScrollTop >= step) { ? ? ? ? ? ? ? ? ? ? currentScrollTop += step; ? ? ? ? ? ? ? ? ? ? setTimeout(smoothDown,1); ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? // 否則直接跳到目標(biāo)點,防止跳過 ? ? ? ? ? ? ? ? ? ? currentScrollTop = targetOffsetTop-step; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? this.$refs.content.scrollTop = currentScrollTop; ? ? ? ? ? ? } ? ? ? ? }; ? ? ? ? smoothDown(); ? ? } }, }
錨點定位bug無效和替代方式
在vue項目中,使用錨點定位會和router的規(guī)則沖突,在項目中的表現(xiàn)就是第一次點擊url改變了,但是沒有跳轉(zhuǎn)到錨點位置,再次點擊才會跳轉(zhuǎn)。
在vue項目中定義一個方法不適用錨點定位
scrollToSection(id) { ? ?let section = document.getElementById(id) ? ?if (section) { ? ? ? section.scrollIntoView() ? ?} }
html標(biāo)簽中綁定click事件就可以了
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue配置nprogress實現(xiàn)頁面頂部進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了vue配置nprogress實現(xiàn)頁面頂部進(jìn)度條,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-09-09Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法
在el-form表單組件中el-input組件輸入內(nèi)容后按下Enter鍵刷新了整個頁面,下面這篇文章主要給大家介紹了關(guān)于Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法,需要的朋友可以參考下2024-03-03VUE + OPENLAYERS實現(xiàn)實時定位功能
本系列文章介紹一個簡單的實時定位示例,基于VUE + OPENLAYERS實現(xiàn)實時定位功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2021-09-09element tree樹形組件回顯數(shù)據(jù)問題解決
本文主要介紹了element tree樹形組件回顯數(shù)據(jù)問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08