vue控制滾動條滑到某個位置的方法實例
一.關(guān)于web開發(fā)的各種高度的計算介紹
設(shè)置當前滑動到的距離
語法一:window.scrollTop(x,y) 傳倆個值
//x橫坐標 y縱坐標
例:window.scrollTop(0,1000)
語法二:window.scrollTop(options) 傳對象,對象里面放屬性
window.scrollTo({ top:560, left:0, behavior: "smooth" });
// top:縱坐標 left:橫坐標
behavior 類型String,表示滾動行為,支持參數(shù) smooth(平滑滾動),instant(瞬間滾動),默認值auto,實測效果等同于instant
// 獲取html元素 let htmlDom = document.documentElement; // 獲取頁面高度加內(nèi)邊距 const deviceHeight = htmlDom.clientHeight; //獲取當前滾動條的高度 const scrollHeight=htmlDom.scrollHeight; //獲取頁面高度加內(nèi)邊距加邊框 const offsetHeight=htmlDom.offsetHeight; console.log("html--------",htmlDom.offsetHeight); console.log("deviceHeight",deviceHeight); console.log("scrollHeight",htmlDom.scrollHeight); //我的業(yè)務(wù)里面只用到了這個scrollHeight let keepHeight=htmlDom.scrollHeight-90; // 如果需要設(shè)置某個元素的樣式等用ref進行一個綁定 這個例子ref綁定的就是list // this.$refs.list.style.height = htmlDom.scrollHeight +"px" window.scrollTo({ top: keepHeight, behavior: 'instant' })
配個官方圖理解:
二.回到頁面頂部實現(xiàn)方法
1. 元素中綁定ref
<div ref="returnTop"></div>
在需要回到頂部的地方加上此代碼
this.$nextTick(() => { this.$refs.returnTop.scrollTop = 0 })
2. 瀏覽器回到頁面頂部 window.scrollTo(0,0),頁面滾動
不用多介紹了,上面有。
一個小例子如下:
window.scrollTo( 0, 100 ); // 設(shè)置滾動行為改為平滑的滾動 window.scrollTo({ top: 1000, behavior: "smooth" });
3.使用el-pagination實現(xiàn)翻頁自動回到頂部
定義$scrollTo方法掛載在vue全局
// main.js Vue.prototype.$scrollTo = (x = 0, y = 0, type = 'smooth') => { window.scrollTo({ top: x, left: y, behavior: type // 滾動行為:smooth平滑滾動,instant瞬間滾動,默認值auto,等同于instant }) } // 使用方法 this.$scrollTo()
三.總計一下今天學(xué)到的新知識
(1)watch監(jiān)聽屬性變化函數(shù)
監(jiān)聽屬性的兩種寫法:
isHot:{ // immediate:true, //初始化時讓handler調(diào)用一下 //handler什么時候調(diào)用?當isHot發(fā)生改變時。 //deep:true, //開啟深度監(jiān)視,當屬性是個對象時,如需監(jiān)聽對象的屬性,需開啟深度監(jiān)視 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }, //簡寫 /* isHot(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) } */
watch監(jiān)聽函數(shù)實現(xiàn)compted函數(shù)相同功能
data:{ firstName:'張', lastName:'三', fullName:'張-三' }, watch:{ firstName(val){ //監(jiān)聽函數(shù)可以實現(xiàn)異步方法 setTimeout(()=>{ console.log(this) this.fullName = val + '-' + this.lastName },1000); }, lastName(val){ this.fullName = this.firstName + '-' + val } }
(2)computed和watch之間的區(qū)別:
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能,computed不一定能完成,例如:watch可以進行異步操作。
但是computed進行計算某些值得時候,可以少寫一個屬性。例如:fullName
補充:vue平滑滾動到指定位置
需求:錨點導(dǎo)航問題,點擊導(dǎo)航跳到對應(yīng)的模塊,兩種方式
1.滾動盒子滾動到指定高度 scrollTo(offsetTop每個模塊頂部距離可滾動盒子的頂部偏移的像素值)
goAnthor (selector) { const height = document.querySelector(selector).offsetTop const container = document.querySelector('.scroll-wrap') container.scrollTo({ top: height, behavior: 'smooth' }) },
2.滾動元素滾動到滾動盒子的最頂部 scrollIntoView
goAnthor(selector) { document.querySelector(selector).scrollIntoView({ behavior: 'smooth' }) },
總結(jié)
到此這篇關(guān)于vue控制滾動條滑到某個位置的文章就介紹到這了,更多相關(guān)vue控制滾動條滑到某位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
VeeValidate在vue項目里表單校驗應(yīng)用案例
這篇文章主要介紹了VeeValidate在vue項目里表單校驗應(yīng)用案例,VeeValidate是Vue.js的驗證庫,它有很多驗證規(guī)則,并支持自定義規(guī)則,非常具有實用價值,需要的朋友可以參考下2018-05-05vue中的attribute和property的具體使用及區(qū)別
本文主要介紹了vue中的attribute和property的具體使用及區(qū)別,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09Vue3+Element-plus項目自動導(dǎo)入報錯的解決方案
vue3出來一段時間了,element也更新了版本去兼容vue3,下面這篇文章主要給大家介紹了關(guān)于Vue3+Element-plus項目自動導(dǎo)入報錯的解決方案,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07vue項目或網(wǎng)頁上實現(xiàn)文字轉(zhuǎn)換成語音播放功能
這篇文章主要介紹了在vue項目或網(wǎng)頁上實現(xiàn)文字轉(zhuǎn)換成語音,需要的朋友可以參考下2020-06-06vue中 數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子
今天小編就為大家分享一篇vue中 數(shù)字相加為字串轉(zhuǎn)化為數(shù)值的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11