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)文章
vue3中項目優(yōu)化方法詳解(Web?Worker的使用)
最近在做vue3的項目中,遇到了計算量龐大導(dǎo)致頁面響應(yīng)緩慢的問題,所以下面這篇文章主要給大家介紹了關(guān)于vue3中項目優(yōu)化方法的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要給大家介紹了關(guān)于如何快速將Vue項目升級到webpack3的方法步驟文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
這篇文章主要介紹了vue?scoped與深度選擇器deep的原理分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue實現(xiàn)el-select的change事件過程
這篇文章主要介紹了vue實現(xiàn)el-select的change事件過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue3解析markdown并實現(xiàn)代碼高亮顯示的詳細步驟
Vue的markdown解析庫有很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等，這篇文章主要介紹了Vue3解析markdown并實現(xiàn)代碼高亮顯示,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue組件通信傳值操作,結(jié)合實例形式分析了vue.js父子組件通信及兄弟組件通信相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家介紹了Vue3之使用js實現(xiàn)動畫示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要給大家介紹一下vue實現(xiàn)在頁面上添加水印的實例,文中有詳細的代碼示例供大家參考,具有一定的參考價值,感興趣的小伙伴跟著小編一起來看看吧2023-12-12
本文給大家?guī)砹藇ue中錨點的三種方法，本文通過實例代碼給大家介紹的非常詳細，感興趣的朋友一起看看吧2018-07-07
這篇文章主要為大家詳細介紹了vue+elementUi圖片上傳組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08