vue 中滾動(dòng)條始終定位在底部的方法
滾動(dòng)條定位在底部，首先想到的是，動(dòng)態(tài)修改滾動(dòng)條到頂部的距離等于div的高度，
代碼實(shí)現(xiàn)：
var div = document.getElementById('data-list-content')
div.scrollTop = div.scrollHeight
但是問(wèn)題來(lái)了，滾動(dòng)條并沒(méi)有到達(dá)底部，而是距離底部還有一點(diǎn)距離（一臉懵逼）
估計(jì)是動(dòng)態(tài)加載數(shù)據(jù)時(shí)，數(shù)據(jù)還未加載，滾動(dòng)條就已經(jīng)執(zhí)行，知道原因了，那就實(shí)踐唄。
第二次嘗試，利用vue的watch監(jiān)控?cái)?shù)據(jù)的改變，然后動(dòng)態(tài)修改滾動(dòng)條到頂部的距離
代碼實(shí)現(xiàn)：
watch: {
'processData': 'scrollToBottom'
}
scrollToBottom: function () {
var div = document.getElementById('data-list-content')
div.scrollTop = div.scrollHeight
}
再次崩潰了，好像沒(méi)有毛用（陷入苦思）。
這個(gè)時(shí)候我想到了$nextTick 。
簡(jiǎn)單的介紹下$nextTick：
Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化，而是按一定的策略進(jìn)行 DOM 的更新。
$nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 。
既然$nextTick是在下次DOM更新時(shí)執(zhí)行的，不正好符合我們的要求嘛（小激動(dòng)）。
代碼實(shí)現(xiàn)：
watch: {
'processData': 'scrollToBottom'
}
scrollToBottom: function () {
this.$nextTick(() => {
var div = document.getElementById('data-list-content')
div.scrollTop = div.scrollHeight
})
}
運(yùn)行代碼，成功了。
以上這篇vue 中滾動(dòng)條始終定位在底部的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了深入Vue3中的Mock數(shù)據(jù)模擬實(shí)現(xiàn)細(xì)節(jié)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Vue項(xiàng)目中components組件(模板)的使用及說(shuō)明
這篇文章主要介紹了Vue項(xiàng)目中components組件(模板)的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue3.0數(shù)據(jù)響應(yīng)式原理詳解
這篇文章主要介紹了Vue3.0數(shù)據(jù)響應(yīng)式原理詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Element?UI表單驗(yàn)證規(guī)則動(dòng)態(tài)失效問(wèn)題的解決辦法
這篇文章主要給大家介紹了關(guān)于Element?UI表單驗(yàn)證規(guī)則動(dòng)態(tài)失效問(wèn)題的解決辦法,Element UI提供了強(qiáng)大的表單驗(yàn)證功能,可以輕松地對(duì)表單進(jìn)行驗(yàn)證,需要的朋友可以參考下2023-09-09
淺談Vue內(nèi)置component組件的應(yīng)用場(chǎng)景
這篇文章主要介紹了淺談Vue內(nèi)置component組件的應(yīng)用場(chǎng)景，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了基于Vue中的父子傳值問(wèn)題解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue 插值 v-once,v-text, v-html詳解
這篇文章主要介紹了vue 插值 v-once,v-text, v-html詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue單文件組件lint error自動(dòng)fix與styleLint報(bào)錯(cuò)自動(dòng)fix詳解
這篇文章主要給大家介紹了關(guān)于vue單文件組件lint error自動(dòng)fix與styleLint報(bào)錯(cuò)自動(dòng)fix的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)
這篇文章主要介紹了使用jenkins一鍵打包發(fā)布vue項(xiàng)目的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
目前前端最流行的網(wǎng)絡(luò)請(qǐng)求庫(kù)還是axios,所以對(duì)axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于vue3和ts封裝axios以及使用mock.js的相關(guān)資料,文章通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02