vue中如何實(shí)現(xiàn)錨點(diǎn)定位平滑滾動(dòng)
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名獲取元素在頁(yè)面中的位置并滾動(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)文章
Vue 應(yīng)用中結(jié)合vux使用微信 jssdk的方法
今天小編就為大家分享一篇Vue 應(yīng)用中結(jié)合vux使用微信 jssdk的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08vue實(shí)現(xiàn)樣式之間的切換及vue動(dòng)態(tài)樣式的實(shí)現(xiàn)方法
這篇文章主要介紹了vue中如何實(shí)現(xiàn)樣式之間的切換及vue動(dòng)態(tài)樣式的實(shí)現(xiàn)方法,本文給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12vue3 axios 實(shí)現(xiàn)自動(dòng)化api配置詳解
這篇文章主要為大家介紹了vue3 axios 實(shí)現(xiàn)自動(dòng)化api配置詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09關(guān)于Vue中的計(jì)算屬性和監(jiān)聽屬性詳解
這篇文章主要介紹了關(guān)于Vue中的計(jì)算屬性和監(jiān)聽屬性詳解,Vue.js模板內(nèi)的表達(dá)式非常便利,但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的,在模板內(nèi)放入過長(zhǎng)的或復(fù)雜的邏輯時(shí),會(huì)讓模板過重且難以維護(hù),需要的朋友可以參考下2023-05-05VUE使用vue?create命令創(chuàng)建vue2.0項(xiàng)目的全過程
vue-cli是創(chuàng)建Vue項(xiàng)目的一個(gè)腳手架工具,vue-cli提供了vue create等命令,下面這篇文章主要給大家介紹了關(guān)于VUE使用vue?create命令創(chuàng)建vue2.0項(xiàng)目的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07Vue3組合式API之getCurrentInstance詳解
我們可以通過?getCurrentInstance這個(gè)函數(shù)來返回當(dāng)前組件的實(shí)例對(duì)象,也就是當(dāng)前vue這個(gè)實(shí)例對(duì)象,下面這篇文章主要給大家介紹了關(guān)于Vue3組合式API之getCurrentInstance的相關(guān)資料,需要的朋友可以參考下2022-09-09