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