Vue項(xiàng)目中實(shí)現(xiàn)描點(diǎn)跳轉(zhuǎn)scrollIntoView的案例
更新時(shí)間：2022年09月16日 08:38:25 作者：JackieDYH
這篇文章主要介紹了Vue項(xiàng)目中實(shí)現(xiàn)描點(diǎn)跳轉(zhuǎn)scrollIntoView的案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vue實(shí)現(xiàn)描點(diǎn)跳轉(zhuǎn)scrollIntoView
方式一：使用a標(biāo)簽#id形式
<a href="#about" rel="external nofollow" >聯(lián)系我們</a> ? <div id="about"> ? ? 跳轉(zhuǎn)內(nèi)容 </div>
方式二：scrollIntoView
//需要讓頁面滑動(dòng)到指定位置
//首先給元素添加id屬性或其他可以獲取元素的屬性
//通過scrollIntoView方法實(shí)現(xiàn)頁面跳轉(zhuǎn)
document.getElementById(id).scrollIntoView({ behavior: "smooth" });
?
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型參數(shù)
element.scrollIntoView(scrollIntoViewOptions); // Object型參數(shù)
?
//可選
alignToTop:boolean值類型
true:默認(rèn)值。元素的頂端將和其所在滾動(dòng)區(qū)的可視區(qū)域的頂端對(duì)齊。相應(yīng)的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。
false:元素的底端將和其所在滾動(dòng)區(qū)的可視區(qū)域的底端對(duì)齊。相應(yīng)的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
?
//可選
scrollIntoViewOptions ：
behavior ：定義動(dòng)畫過渡效果，值為auto或smooth。
block ：定義垂直方向的對(duì)齊，值為start/center/end/nearest。
inline ：定義水平方向的對(duì)齊，值為start/center/end/nearest。
?
//實(shí)例
element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});使用
<a @click="goButtom">聯(lián)系我們</a>
?
methods: {
?? ?// 跳轉(zhuǎn)到頁面
?? ?goButtom() {
?? ? ?document.getElementById("about").scrollIntoView({
?? ??? ?behavior: "smooth", // 平滑過渡
?? ??? ?block: "start", // 上邊框與視窗頂部平齊。默認(rèn)值
?? ? ?});
?? ?},
},
?
?
------------------------------------------二------------------------------------------
?
<div id="pronbit" ref="pronbit">需要移動(dòng)到的位置</div>
?
//選中id
document.getElementById(e).scrollIntoView({
?? ?behavior: "smooth", ?// 平滑過渡
?? ?block: ? ?"start" ?// 上邊框與視窗頂部平齊。默認(rèn)值
});
// 選中ref
this.$refs.pronbit.scrollIntoView({
?? ?behavior: "smooth", ?// 平滑過渡
?? ?block: ? ?"start" ?// 上邊框與視窗頂部平齊。默認(rèn)值
});
?
//要是放在mounted()里執(zhí)行使用
this.$refs.pronbit.scrollIntoView();//不然只執(zhí)行一次刷新了也一樣
?
//禁止scrollIntoView
this.$refs.pronbit.scrollIntoView(false);vue遇到scrollIntoView無效問題
官方文檔寫的簡單
Element 接口的scrollIntoView()方法會(huì)滾動(dòng)元素的父容器，使被調(diào)用scrollIntoView()的元素對(duì)用戶可見。
語法：
element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop);// Boolean型參數(shù) element.scrollIntoView(scrollIntoViewOptions);// Object型參數(shù)
首先容器滾動(dòng)，然后document.geyElementById或者document.querySelector 獲取指定元素，最夠元素調(diào)用scrollIntoView.
參數(shù)
alignToTop可選
一個(gè)Boolean值：
- 如果為true，元素的頂端將和其所在滾動(dòng)區(qū)的可視區(qū)域的頂端對(duì)齊。相應(yīng)的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。這是這個(gè)參數(shù)的默認(rèn)值。
- 如果為false，元素的底端將和其所在滾動(dòng)區(qū)的可視區(qū)域的底端對(duì)齊。相應(yīng)的scrollIntoViewOptions: {block: "end", inline: "nearest"}。
scrollIntoViewOptions 可選
一個(gè)包含下列屬性的對(duì)象：
behavior 可選
- 定義動(dòng)畫過渡效果， "auto"或 "smooth"之一。默認(rèn)為"auto"。
block 可選
- 定義垂直方向的對(duì)齊，"start","center","end", 或 "nearest"之一。默認(rèn)為 “start”。
inline 可選
- 定義水平方向的對(duì)齊， "start", "center","end", 或 "nearest"之一。默認(rèn)為 “nearest”。
- 實(shí)際在vue項(xiàng)目中遇到，當(dāng)通過點(diǎn)擊事件調(diào)用子組件的元素滾動(dòng)到可視區(qū)域時(shí)怎樣都無效。
- 最終發(fā)現(xiàn)，這個(gè)方法還有一個(gè)限制：需要頁面完全加載后再調(diào)用
- 這樣，在vue中可以使用$nextTick函數(shù)，確保頁面已渲染完成在去調(diào)scrollIntoView使?jié)L動(dòng)到可視區(qū)域
實(shí)現(xiàn)代碼如下
父組件：
showDatePicker(){
? if (this.$refs.pickers) {
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.$refs.pickers.showCurrentDate()
? ? ? ? })
? ? ? }子組件：
? showCurrentDate() {
? ? ? this.$el.querySelector('.active').scrollIntoView({
? ? ? ? block: 'start',
? ? ? }) // 回到頂部
? ? },以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3繼承并擴(kuò)展三方組件完成二次封裝,文章使用naiveui的Input組件進(jìn)行舉例,elementPlus或者其他組件庫同理,并通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue2.0 常用的 UI 庫實(shí)例講解，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了vue3.0組合式api的使用小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue基礎(chǔ)之使用get、post、jsonp實(shí)現(xiàn)交互功能示例
這篇文章主要介紹了vue基礎(chǔ)之使用get、post、jsonp實(shí)現(xiàn)交互功能,結(jié)合實(shí)例形式分析了vue.js中g(shù)et、post及jsonp針對(duì)本地文件、網(wǎng)絡(luò)接口實(shí)現(xiàn)交互功能相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vue中el-select中多選回顯數(shù)據(jù)后沒法重新選擇和更改的解決
本文主要介紹了vue中el-select中多選回顯數(shù)據(jù)后沒法重新選擇和更改解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
本文深入探討了Vue3中新特性shallowReactive的使用和原理,shallowReactive是創(chuàng)建淺響應(yīng)式對(duì)象的API,只對(duì)對(duì)象的第一層屬性進(jìn)行響應(yīng)式轉(zhuǎn)換,不對(duì)嵌套對(duì)象處理,有助于性能優(yōu)化和狀態(tài)管理,同時(shí)也指出了shallowReactive在使用中的注意事項(xiàng)2024-10-10
vue使用動(dòng)畫實(shí)現(xiàn)滾動(dòng)表格效果
這篇文章主要為大家詳細(xì)介紹了vue使用動(dòng)畫實(shí)現(xiàn)滾動(dòng)表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue 解決兄弟組件、跨組件深層次的通信操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue開發(fā)之watch監(jiān)聽數(shù)組、對(duì)象、變量操作分析
這篇文章主要介紹了Vue開發(fā)之watch監(jiān)聽數(shù)組、對(duì)象、變量操作,結(jié)合實(shí)例形式分析了vue.js使用Watch針對(duì)數(shù)組、對(duì)象、變量監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
Vue動(dòng)態(tài)類的幾種使用方法總結(jié)
這篇文章主要介紹了Vue動(dòng)態(tài)類的幾種使用方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01