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
//需要讓頁(yè)面滑動(dòng)到指定位置
//首先給元素添加id屬性或其他可以獲取元素的屬性
//通過(guò)scrollIntoView方法實(shí)現(xiàn)頁(yè)面跳轉(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值類(lèi)型
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)畫(huà)過(guò)渡效果，值為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)到頁(yè)面
?? ?goButtom() {
?? ? ?document.getElementById("about").scrollIntoView({
?? ??? ?behavior: "smooth", // 平滑過(guò)渡
?? ??? ?block: "start", // 上邊框與視窗頂部平齊。默認(rèn)值
?? ? ?});
?? ?},
},
?
?
------------------------------------------二------------------------------------------
?
<div id="pronbit" ref="pronbit">需要移動(dòng)到的位置</div>
?
//選中id
document.getElementById(e).scrollIntoView({
?? ?behavior: "smooth", ?// 平滑過(guò)渡
?? ?block: ? ?"start" ?// 上邊框與視窗頂部平齊。默認(rèn)值
});
// 選中ref
this.$refs.pronbit.scrollIntoView({
?? ?behavior: "smooth", ?// 平滑過(guò)渡
?? ?block: ? ?"start" ?// 上邊框與視窗頂部平齊。默認(rèn)值
});
?
//要是放在mounted()里執(zhí)行使用
this.$refs.pronbit.scrollIntoView();//不然只執(zhí)行一次刷新了也一樣
?
//禁止scrollIntoView
this.$refs.pronbit.scrollIntoView(false);vue遇到scrollIntoView無(wú)效問(wèn)題
官方文檔寫(xiě)的簡(jiǎn)單
Element 接口的scrollIntoView()方法會(huì)滾動(dòng)元素的父容器，使被調(diào)用scrollIntoView()的元素對(duì)用戶(hù)可見(jiàn)。
語(yǔ)法：
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)畫(huà)過(guò)渡效果， "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)通過(guò)點(diǎn)擊事件調(diào)用子組件的元素滾動(dòng)到可視區(qū)域時(shí)怎樣都無(wú)效。
- 最終發(fā)現(xiàn)，這個(gè)方法還有一個(gè)限制：需要頁(yè)面完全加載后再調(diào)用
- 這樣，在vue中可以使用$nextTick函數(shù)，確保頁(yè)面已渲染完成在去調(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)文章
watch的基本用法是在Vue實(shí)例中定義一個(gè)watch對(duì)象,該對(duì)象內(nèi)部包含需要監(jiān)聽(tīng)的數(shù)據(jù)項(xiàng)和對(duì)應(yīng)的回調(diào)函數(shù)，這篇文章主要介紹了vue2中watch的使用,需要的朋友可以參考下2024-01-01
打開(kāi)尤大大的GitHub，發(fā)現(xiàn)多了個(gè)叫 petite-vue 的東西,Vue3 和 Vite 還沒(méi)學(xué)完呢，又開(kāi)始整新東西了？本文就來(lái)介紹一下2021-07-07
父子組件生命周期及子組件獲取數(shù)據(jù)傳值問(wèn)題剖析
這篇文章主要介紹了父子組件生命周期及子組件獲取數(shù)據(jù)問(wèn)題剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
vue?this.$router和this.$route區(qū)別解析及路由傳參的2種方式?&&?this.$route
this.$router?相當(dāng)于一個(gè)全局的路由器對(duì)象,包含了很多屬性和對(duì)象（比如?history?對(duì)象）,任何頁(yè)面都可以調(diào)用其?push(),?replace(),?go()?等方法,本文給大家介紹Vue中this.$router與this.$route的區(qū)別?及push()方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了前端Vue中常用rules校驗(yàn)規(guī)則詳解，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
詳解在Vue.js編寫(xiě)更好的v-for循環(huán)的6種技巧
這篇文章主要介紹了詳解在Vue.js編寫(xiě)更好的v-for循環(huán)的6種技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要為大家詳細(xì)介紹了vue使用swiper.js重疊輪播組建樣式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
vue實(shí)現(xiàn)websocket客服聊天功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)websocket客服聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家介紹了ant-design-vue按鈕樣式擴(kuò)展方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
VUE?Element修改el-input和el-select長(zhǎng)度的具體步驟
這篇文章主要給大家介紹了關(guān)于VUE?Element修改el-input和el-select長(zhǎng)度的具體步驟,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12