vue中如何實(shí)現(xiàn)錨點(diǎn)定位平滑滾動(dòng)

更新時(shí)間：2022年09月16日 10:48:25 作者：寸頭強(qiáng)

這篇文章主要介紹了vue中如何實(shí)現(xiàn)錨點(diǎn)定位平滑滾動(dòng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue錨點(diǎn)定位平滑滾動(dòng)

下面是簡(jiǎn)單的代碼，拿來即用

html

//給div盒子設(shè)定單擊事件和ref名
<div @click="getThere" ref="cat_box">點(diǎn)擊滑動(dòng)到此位置</div>

methods: {
?getThere() {
? ? ? // 通過ref名獲取元素在頁面中的位置并滾動(dòng)至此
? ? ? this.$el.querySelector(".cat_box")
? ? ? .scrollIntoView({ block: "start", behavior: "smooth" }); ?
? ? },
}

vue點(diǎn)擊tabs平滑滾動(dòng)(錨點(diǎn)事件)

避免切換速度過快顯得突兀，在不使用 a 標(biāo)簽以及添加 class類進(jìn)行錨點(diǎn)操作時(shí)，這時(shí)候就可以用到 dom 方法 scrollTo 來實(shí)現(xiàn)平滑滾動(dòng)。

定義

scrollTo(xpos,ypos),包含兩個(gè)必須屬性

xpos（指定滾動(dòng)到X軸指定位置）
ypos（指定滾動(dòng)到X軸指定位置）

使用：

// 滾動(dòng)到指定位置window.scrollTo(100,500)

scrollTo(options)，包含三個(gè)必須屬性

top (y-coord) 相當(dāng)于y軸指定位置
left (x-coord) 相當(dāng)于x軸指定位置
behavior 類型String,表示滾動(dòng)行為,支持參數(shù) smooth(平滑滾動(dòng)),instant(瞬間滾動(dòng)),默認(rèn)值auto

使用：

// 設(shè)置滾動(dòng)行為改為平滑的滾動(dòng)
window.scrollTo({
    top: 1000,
    behavior: "smooth"
});

兼容

適用于pc端和移動(dòng)端，scrollTo（options）屬性不兼容 IE

在這里插入圖片描述

使用

// vue中使用
// 標(biāo)題
<div
   class="tabs"
   v-for="(item, index) in titAll"
   :key="index"
   :class="{ actives: isactive === index }"
   @click="tabsColor(index)"
>
     {{ item }}
</div>
// 分類tit
<div>
  <div class="item" id="tabs0">資產(chǎn)賬戶</div>
  // <div>分類內(nèi)容</div>
  <div class="item" id="tabs1">信貸服務(wù)</div>
  // <div>分類內(nèi)容</div>
  <div class="item" id="tabs2">金融服務(wù)</div>
  // <div>分類內(nèi)容</div>
</div>
 data() {
   return {
     titAll: ["資產(chǎn)賬戶", "信貸金融", "經(jīng)融服務(wù)"],
     //初始選中
     isactive: 0,
   };
 },
 methods: {
  tabsColor(index) {
  	// 切換選中樣式
    this.isactive = index;
    // 獲取對(duì)應(yīng)iddom
    const tabsId = document.querySelector(`#tabs${index}`);
    // 判斷進(jìn)行平滑滾動(dòng)
    if (tabsId) {
      window.scrollTo({
        top: tabsId.offsetTop,
        behavior: "smooth",
      });
    }
  },
},

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Element Breadcrumb 面包屑的使用方法
這篇文章主要介紹了Element Breadcrumb 面包屑的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
vue Element UI 解決表格數(shù)據(jù)不更新問題及解決方案
在使用Vue和ElementUI開發(fā)后臺(tái)管理系統(tǒng)時(shí),可能會(huì)遇到表格數(shù)據(jù)不更新的問題,這通常是因?yàn)閂ue的響應(yīng)式系統(tǒng)未檢測(cè)到數(shù)據(jù)變化或數(shù)據(jù)更新后未正確觸發(fā)視圖的重新渲染,本文給大家介紹vue Element UI 解決表格數(shù)據(jù)不更新問題,感興趣的朋友一起看看吧
2024-10-10
vue子組件如何使用父組件傳過來的值
這篇文章主要介紹了vue子組件如何使用父組件傳過來的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue+webpack模擬后臺(tái)數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+webpack模擬后臺(tái)數(shù)據(jù)的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
Vue項(xiàng)目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問題及解決
這篇文章主要介紹了Vue項(xiàng)目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue?項(xiàng)目中Echarts?5使用方法詳解
這篇文章主要為大家介紹了Vue?項(xiàng)目中Echarts?5使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
在Vue3項(xiàng)目中使用Jest配置生成測(cè)試報(bào)告的示例詳解
在Vue 3項(xiàng)目中使用Jest進(jìn)行單元測(cè)試是一種常見的做法,它可以幫助我們驗(yàn)證代碼的正確性和穩(wěn)定性,本文將介紹如何在Vue 3項(xiàng)目中配置Jest,以生成測(cè)試報(bào)告,需要的朋友可以參考下
2023-09-09
vue全局混入之狀態(tài)判斷是否執(zhí)行點(diǎn)擊
這篇文章主要介紹了vue全局混入之狀態(tài)判斷是否執(zhí)行點(diǎn)擊方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue-element-admin開發(fā)教程(v4.0.0之后)
由于vue-element-admin的架構(gòu)再4.0.0版本后做了重構(gòu)，整體結(jié)構(gòu)上和之前的還是很相似的，但是也有些變化，本文就介紹vue-element-admin開發(fā)教程(v4.0.0之后)，感興趣的可以了解一下
2022-04-04
vue項(xiàng)目遇見事件冒泡該如何處理詳解
冒泡事件處理是由內(nèi)而外發(fā)生的,例如有兩個(gè)父子div,給他們分別寫上點(diǎn)擊事件,點(diǎn)擊子div先響應(yīng)的是子div,再是父div,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目遇見事件冒泡該如何處理的相關(guān)資料,需要的朋友可以參考下
2023-04-04