vue中如何實現錨點定位平滑滾動
更新時間：2022年09月16日 10:48:25 作者：寸頭強
這篇文章主要介紹了vue中如何實現錨點定位平滑滾動方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
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 來實現平滑滾動。
定義
scrollTo(xpos,ypos),包含兩個必須屬性
xpos（指定滾動到X軸指定位置）ypos（指定滾動到X軸指定位置）
使用：
// 滾動到指定位置window.scrollTo(100,500)
scrollTo(options)，包含三個必須屬性
top (y-coord)相當于y軸指定位置left (x-coord)相當于x軸指定位置behavior類型String,表示滾動行為,支持參數 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",
});
}
},
},
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Element Breadcrumb 面包屑的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
vue Element UI 解決表格數據不更新問題及解決方案
在使用Vue和ElementUI開發(fā)后臺管理系統(tǒng)時,可能會遇到表格數據不更新的問題,這通常是因為Vue的響應式系統(tǒng)未檢測到數據變化或數據更新后未正確觸發(fā)視圖的重新渲染,本文給大家介紹vue Element UI 解決表格數據不更新問題,感興趣的朋友一起看看吧2024-10-10
這篇文章主要介紹了vue子組件如何使用父組件傳過來的值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue+webpack模擬后臺數據的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Vue項目導入導出文件功能以及導出文件后亂碼問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了Vue?項目中Echarts?5使用方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
在Vue 3項目中使用Jest進行單元測試是一種常見的做法,它可以幫助我們驗證代碼的正確性和穩(wěn)定性,本文將介紹如何在Vue 3項目中配置Jest,以生成測試報告,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue全局混入之狀態(tài)判斷是否執(zhí)行點擊方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-element-admin開發(fā)教程(v4.0.0之后)
由于vue-element-admin的架構再4.0.0版本后做了重構，整體結構上和之前的還是很相似的，但是也有些變化，本文就介紹vue-element-admin開發(fā)教程(v4.0.0之后)，感興趣的可以了解一下2022-04-04
冒泡事件處理是由內而外發(fā)生的,例如有兩個父子div,給他們分別寫上點擊事件,點擊子div先響應的是子div,再是父div,下面這篇文章主要給大家介紹了關于vue項目遇見事件冒泡該如何處理的相關資料,需要的朋友可以參考下2023-04-04