Vue如何設(shè)置滾動(dòng)條自動(dòng)保持到最底端
Vue設(shè)置滾動(dòng)條自動(dòng)保持到最底端
需求描述:在開(kāi)發(fā)中我們常常會(huì)遇到需要讓滾動(dòng)條保持到最底端的需求,比如在開(kāi)發(fā)一個(gè)聊天框時(shí),請(qǐng)求接口拿到消息列表數(shù)據(jù),展示到前端頁(yè)面時(shí),需要讓滾動(dòng)條自動(dòng)滾到最底端,以此來(lái)展示最后的聊天記錄。同時(shí),當(dāng)發(fā)送一條新的消息時(shí),也需要滾動(dòng)條自動(dòng)滾動(dòng)到最底端,默認(rèn)顯示到最后一條數(shù)據(jù),而不是在發(fā)送完一條新消息之后還需要手動(dòng)滑動(dòng)滾動(dòng)條到最底端。
主要實(shí)現(xiàn)原理:
其實(shí)這個(gè)需求就是需要設(shè)置該元素(產(chǎn)生滾動(dòng)條的元素)的scrollTop
等于scrollHeight
主要代碼:
<template> <div ref="box" class="box"></div> </template>
<script> // 滾動(dòng)到底部 scrollToBottom() { // 這里是Vue2的寫(xiě)法 const box = this.$refs.box as HTMLElement this.$nextTick(() => { box.scrollTop = box.scrollHeight }) } </script>
<style> .box { overflow: auto; height: 446px; /*重要!一定要有高度才會(huì)生成滾動(dòng)條*/ } </style>
注意事項(xiàng):
box容器必須設(shè)置具體的高度height
,否則不會(huì)產(chǎn)生滾動(dòng)條,(如果頁(yè)面上看有滾動(dòng)條,那可能是父元素產(chǎn)生的滾動(dòng)條),如果沒(méi)有給box容器設(shè)置高度的話,這個(gè)scrollToBottom
方法就不會(huì)生效!
補(bǔ)充:Vue項(xiàng)目中讓滾動(dòng)條始終處于最底部
Vue項(xiàng)目中讓滾動(dòng)條始終處于最底部
效果圖:
核心代碼:
// 讓滾動(dòng)條始終在最底部 this.$nextTick(() => { this.$refs.messageContent.scrollTop = this.$refs.messageContent.scrollHeight })
到此這篇關(guān)于Vue如何設(shè)置滾動(dòng)條自動(dòng)保持到最底端的文章就介紹到這了,更多相關(guān)Vue滾動(dòng)條自動(dòng)保持到最底端內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue滾動(dòng)條滾動(dòng)到頂部或者底部的方法
- vue進(jìn)入頁(yè)面時(shí)滾動(dòng)條始終在底部代碼實(shí)例
- vue 監(jiān)聽(tīng)某個(gè)div垂直滾動(dòng)條下拉到底部的方法
- vue 中滾動(dòng)條始終定位在底部的方法
- vue 純js監(jiān)聽(tīng)滾動(dòng)條到底部的實(shí)例講解
- vue實(shí)現(xiàn)動(dòng)態(tài)添加數(shù)據(jù)滾動(dòng)條自動(dòng)滾動(dòng)到底部的示例代碼
- vue 每次渲染完頁(yè)面后div的滾動(dòng)條保持在最底部的方法
相關(guān)文章
vue?請(qǐng)求后端數(shù)據(jù)的示例代碼
在vue中,我們?nèi)绾瓮ㄟ^(guò)請(qǐng)求接口來(lái)訪問(wèn)后端的數(shù)據(jù)呢?在這里簡(jiǎn)單總結(jié)了一個(gè)小示例,對(duì)vue請(qǐng)求后端數(shù)據(jù)實(shí)例代碼感興趣的朋友一起看看吧2022-09-09VUE插件vue-treeselect的使用及說(shuō)明
這篇文章主要介紹了VUE插件vue-treeselect的使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。2023-07-07vue項(xiàng)目登錄模塊滑塊拼圖驗(yàn)證功能實(shí)現(xiàn)代碼(純前端)
滑塊驗(yàn)證作為一種反機(jī)器人的工具,也會(huì)不斷發(fā)展和演進(jìn),以適應(yīng)不斷變化的威脅,這篇文章主要給大家介紹了vue項(xiàng)目登錄模塊滑塊拼圖驗(yàn)證功能實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的操作方法
在element?ui中的日期時(shí)間選擇組件中默認(rèn)是00:00,現(xiàn)在需求是點(diǎn)擊默認(rèn)結(jié)束時(shí)間為當(dāng)前時(shí)分秒,查了很多資料寫(xiě)的都不準(zhǔn)確?,今天給大家分享el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的操作方法,感興趣的朋友一起看看吧2024-01-01vuepress打包之后頁(yè)面樣式丟失問(wèn)題的兩種解決方式
這篇文章主要介紹了vuepress打包之后頁(yè)面樣式丟失問(wèn)題的兩種解決方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07