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

vue中如何實現(xiàn)錨點定位平滑滾動

 更新時間：2022年09月16日 10:48:25   作者：寸頭強  
這篇文章主要介紹了vue中如何實現(xiàn)錨點定位平滑滾動方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue錨點定位平滑滾動

下面是簡單的代碼，拿來即用

html 

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

vue點擊tabs平滑滾動(錨點事件)

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

定義

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

  • xpos（指定滾動到X軸指定位置）
  • ypos（指定滾動到X軸指定位置）

使用：

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

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

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

使用：

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

兼容

適用于pc端和移動端，scrollTo（options）屬性不兼容 IE

在這里插入圖片描述

使用

// vue中使用
// 標題
<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">資產賬戶</div>
  // <div>分類內容</div>
  <div class="item" id="tabs1">信貸服務</div>
  // <div>分類內容</div>
  <div class="item" id="tabs2">金融服務</div>
  // <div>分類內容</div>
</div>
 data() {
   return {
     titAll: ["資產賬戶", "信貸金融", "經融服務"],
     //初始選中
     isactive: 0,
   };
 },
 methods: {
  tabsColor(index) {
  	// 切換選中樣式
    this.isactive = index;
    // 獲取對應iddom
    const tabsId = document.querySelector(`#tabs${index}`);
    // 判斷進行平滑滾動
    if (tabsId) {
      window.scrollTo({
        top: tabsId.offsetTop,
        behavior: "smooth",
      });
    }
  },
},

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論