您好,登錄后才能下訂單哦!
今天小編給大家分享一下vue如何控制滾動(dòng)條滑到某個(gè)位置的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
設(shè)置當(dāng)前滑動(dòng)到的距離
語(yǔ)法一:window.scrollTop(x,y) 傳倆個(gè)值
//x橫坐標(biāo) y縱坐標(biāo)
例:window.scrollTop(0,1000)
語(yǔ)法二:window.scrollTop(options) 傳對(duì)象,對(duì)象里面放屬性
window.scrollTo({ top:560, left:0, behavior: "smooth" });
// top:縱坐標(biāo) left:橫坐標(biāo)
behavior 類型String,表示滾動(dòng)行為,支持參數(shù) smooth(平滑滾動(dòng)),instant(瞬間滾動(dòng)),默認(rèn)值auto,實(shí)測(cè)效果等同于instant
// 獲取html元素 let htmlDom = document.documentElement; // 獲取頁(yè)面高度加內(nèi)邊距 const deviceHeight = htmlDom.clientHeight; //獲取當(dāng)前滾動(dòng)條的高度 const scrollHeight=htmlDom.scrollHeight; //獲取頁(yè)面高度加內(nèi)邊距加邊框 const offsetHeight=htmlDom.offsetHeight; console.log("html--------",htmlDom.offsetHeight); console.log("deviceHeight",deviceHeight); console.log("scrollHeight",htmlDom.scrollHeight); //我的業(yè)務(wù)里面只用到了這個(gè)scrollHeight let keepHeight=htmlDom.scrollHeight-90; // 如果需要設(shè)置某個(gè)元素的樣式等用ref進(jìn)行一個(gè)綁定 這個(gè)例子ref綁定的就是list // this.$refs.list.style.height = htmlDom.scrollHeight +"px" window.scrollTo({ top: keepHeight, behavior: 'instant' })
配個(gè)官方圖理解:
<div ref="returnTop"></div>
在需要回到頂部的地方加上此代碼
this.$nextTick(() => { this.$refs.returnTop.scrollTop = 0 })
不用多介紹了,上面有。
一個(gè)小例子如下:
window.scrollTo( 0, 100 ); // 設(shè)置滾動(dòng)行為改為平滑的滾動(dòng) window.scrollTo({ top: 1000, behavior: "smooth" });
定義$scrollTo方法掛載在vue全局
// main.js Vue.prototype.$scrollTo = (x = 0, y = 0, type = 'smooth') => { window.scrollTo({ top: x, left: y, behavior: type // 滾動(dòng)行為:smooth平滑滾動(dòng),instant瞬間滾動(dòng),默認(rèn)值auto,等同于instant }) } // 使用方法 this.$scrollTo()
監(jiān)聽屬性的兩種寫法:
isHot:{ // immediate:true, //初始化時(shí)讓handler調(diào)用一下 //handler什么時(shí)候調(diào)用?當(dāng)isHot發(fā)生改變時(shí)。 //deep:true, //開啟深度監(jiān)視,當(dāng)屬性是個(gè)對(duì)象時(shí),如需監(jiān)聽對(duì)象的屬性,需開啟深度監(jiān)視 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }, //簡(jiǎn)寫 /* isHot(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) } */
watch監(jiān)聽函數(shù)實(shí)現(xiàn)compted函數(shù)相同功能
data:{ firstName:'張', lastName:'三', fullName:'張-三' }, watch:{ firstName(val){ //監(jiān)聽函數(shù)可以實(shí)現(xiàn)異步方法 setTimeout(()=>{ console.log(this) this.fullName = val + '-' + this.lastName },1000); }, lastName(val){ this.fullName = this.firstName + '-' + val } }
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能,computed不一定能完成,例如:watch可以進(jìn)行異步操作。
但是computed進(jìn)行計(jì)算某些值得時(shí)候,可以少寫一個(gè)屬性。例如:fullName
需求:錨點(diǎn)導(dǎo)航問題,點(diǎn)擊導(dǎo)航跳到對(duì)應(yīng)的模塊,兩種方式
1.滾動(dòng)盒子滾動(dòng)到指定高度 scrollTo(offsetTop每個(gè)模塊頂部距離可滾動(dòng)盒子的頂部偏移的像素值)
goAnthor (selector) { const height = document.querySelector(selector).offsetTop const container = document.querySelector('.scroll-wrap') container.scrollTo({ top: height, behavior: 'smooth' }) },
2.滾動(dòng)元素滾動(dòng)到滾動(dòng)盒子的最頂部 scrollIntoView
goAnthor(selector) { document.querySelector(selector).scrollIntoView({ behavior: 'smooth' }) },
以上就是“vue如何控制滾動(dòng)條滑到某個(gè)位置”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。