欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)單的代碼，拿來(lái)即用

html 

//給div盒子設(shè)定單擊事件和ref名
<div @click="getThere" ref="cat_box">點(diǎn)擊滑動(dòng)到此位置</div>
methods: {
?getThere() {
? ? ? // 通過(guò)ref名獲取元素在頁(yè)面中的位置并滾動(dòng)至此
? ? ? this.$el.querySelector(".cat_box")
? ? ? .scrollIntoView({ block: "start", behavior: "smooth" }); ?
? ? },
}

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

避免切換速度過(guò)快顯得突兀，在不使用 a 標(biāo)簽以及添加 class類 進(jìn)行錨點(diǎn)操作時(shí)，這時(shí)候就可以用到 dom 方法 scrollTo 來(lái)實(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)文章

最新評(píng)論