資訊專欄INFORMATION COLUMN
摘要：滾動條不會出現(xiàn)在頭部和底部視窗中。新增功能滾動條置底分頁加載的時候，保持滾動條置于上次停留的位置。我們來看一下動態(tài)圖，實現(xiàn)的功能今天只把這個具體視窗口的滾動條的總結(jié)一下，其他兩個問題，沒有很大的意義。
一、前言
之前寫了一個happyChat的項目，主要是想學(xué)習(xí)一下socketIO的使用。然后最近在給happyChat做前端優(yōu)化和升級。發(fā)現(xiàn)第一版做的很low。
需要優(yōu)化的問題：
1、問題1：滾動條會出現(xiàn)在頭部和底部的視窗中，之前固定頭部和固定底部是使用`position:fixed`。 解決方案：body和html禁止`overflow:hidden`，頭部和底部是`position:relative`，聊天視窗使用`overflow: auto`，這樣聊天視窗才會出現(xiàn)滾動條。滾動條不會出現(xiàn)在頭部和底部視窗中。 2、問題2：聊天視窗一次性加載了所有的聊天內(nèi)容，如果數(shù)據(jù)太多會出現(xiàn)超時的問題。 解決方案：聊天內(nèi)容查詢使用分頁查詢，一次性查詢20條或者30條。 3、問題3：群聊的時候，找不到群成員列表。 解決方案：做一個群信息匯總的組件，包括群成員列表。
新增功能：（1）滾動條置底；（2）分頁加載的時候，保持滾動條置于上次停留的位置。
項目【前端】源代碼地址：https://github.com/saucxs/hap...
項目【后端】端源代碼地址：https://github.com/saucxs/hap...
歡迎fork和start。
線上地址：http://chat.chengxinsong.cn/
二、具體【視窗口】的滾動條的問題環(huán)境：vue
我們先來看一下，給滾動條添加監(jiān)聽事件，必須在created或者mouted周期中，添加scroll的監(jiān)聽事件。
mounted: function () {
window.addEventListener("scroll", this.handleScroll, true); // 監(jiān)聽（綁定）滾輪滾動事件
},
其中handleScroll事件是methods里的事件：
handleScroll() {
this.viewBox = this.$refs.viewBox;
console.log(this.viewBox.scrollTop, "到頭部的距離-------------------")
console.log(this.viewBox.scrollHeight, "滾動條的總高度-------------------")
}
注意：div 到頭部的距離 + 屏幕高度 = 可滾動的總高度
this.$refs.viewBox取到視窗口的dom對象，必須確定dom加載完畢了。
如果我們想置底，我們必須將【滾動條總高度】賦值給【滾動條到頭部的距離】。這樣就置底了。
業(yè)務(wù)是這樣的：（1）當(dāng)進(jìn)入到聊天頁面時候，這時候置底。（2）如果翻看之前的聊天記錄，這時候就不需要置底，保持在當(dāng)前的位置。
1、先解決【進(jìn)入到聊天頁面時候，這時候置底】的問題解決方案：（1）全局設(shè)置一個標(biāo)志位，如果是第一次進(jìn)入，【標(biāo)志位為置底】，執(zhí)行置底方法。（2）如果是翻看之前聊天記錄，【標(biāo)志位改為不置底】，不執(zhí)行置底方法。（3）監(jiān)聽內(nèi)容變化方法，判斷標(biāo)志位是啥，然后看是否執(zhí)行置底方法。
watch: {
message() {
this.viewBox = this.$refs.viewBox
if(this.type == "bottom"){
this.refresh();
}
}
},
refresh就是一個置底方法。
refresh() {
setTimeout(() => {
this.viewBox.scrollTop = this.viewBox.scrollHeight
}, 100)
},
2、如果翻看之前的聊天記錄，這時候就【不需要置底，保持在當(dāng)前的位置】
如果不置底，就是一直在保持在頂部。
思路：將加載之前的【數(shù)據(jù)高度】（此時滾動條的總高度）存放在臨時變量beforeScrollHeight中；將數(shù)據(jù)加載之后的到【頭部的距離】 = 【此時滾動條總高度】- 【臨時變量beforeScrollHeight】。
看一下代碼實現(xiàn)：
監(jiān)聽message值變化
watch: {
message() {
if(this.type == "bottom"){
this.refresh();
}else{
this.nofresh()
}
}
},
主要看nofresh方法
nofresh() {
setTimeout(() => {
this.afterScrollHeight = this.viewBox.scrollHeight - this.beforeScrollHeight;
this.viewBox.scrollTop = this.afterScrollHeight;
}, 100)
},
加載更多的方法
loadMore() {
this.beforeScrollHeight = this.viewBox.scrollHeight;
// 分頁請求數(shù)據(jù)，包裝數(shù)據(jù)。
}
我們來看一下動態(tài)圖，實現(xiàn)的功能
今天只把這個具體視窗口的滾動條的總結(jié)一下，其他兩個問題，沒有很大的意義。
【上述源碼地址】項目地址：https://github.com/saucxs/hap... ，歡迎fork和start。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/109954.html
摘要：絕對底部前端掘金來自國外的設(shè)計達(dá)人，純，可以實現(xiàn)當(dāng)正文內(nèi)容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設(shè)計達(dá)人，純CSS，可以實現(xiàn): 當(dāng)正文內(nèi)容很少時，底部位于窗口最下面。當(dāng)改變窗口高度時，不會出現(xiàn)重疊問題。甚至，創(chuàng)造該CSS的人還專門成立一個網(wǎng)站介紹這個CSS底部布局方案...
摘要：最新一直在看關(guān)于和路由這塊的知識，最終發(fā)現(xiàn)這些路由框架的模塊功能的實現(xiàn)都是基于瀏覽器原生路由的。在瀏覽器中實現(xiàn)前端路由主要有兩種方式一個是我們常用的，另一個是提供的。該對象的和分別表示的各個部分，它們因此被稱為分解屬性。 最新一直在看關(guān)于 Vue 和 React 路由這塊的知識，最終發(fā)現(xiàn)這些路由框架的模塊功能的實現(xiàn)都是基于瀏覽器原生路由 API?的。本著追根溯源的初心，于是就想著將瀏覽...
摘要：最新一直在看關(guān)于和路由這塊的知識，最終發(fā)現(xiàn)這些路由框架的模塊功能的實現(xiàn)都是基于瀏覽器原生路由的。在瀏覽器中實現(xiàn)前端路由主要有兩種方式一個是我們常用的，另一個是提供的。該對象的和分別表示的各個部分，它們因此被稱為分解屬性。 最新一直在看關(guān)于 Vue 和 React 路由這塊的知識，最終發(fā)現(xiàn)這些路由框架的模塊功能的實現(xiàn)都是基于瀏覽器原生路由 API?的。本著追根溯源的初心，于是就想著將瀏覽...
摘要：事件與節(jié)點每個瀏覽器事件處理器被注冊在上下文中。事件對象雖然目前為止我們忽略了它，事件處理器函數(shù)作為對象傳遞事件對象。若事件處理器不希望執(zhí)行默認(rèn)行為通常是因為已經(jīng)處理了該事件，會調(diào)用事件對象的方法。 來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項目原文：Handling Events 譯者：飛龍 協(xié)議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分...
閱讀 1581·2021-11-16 11:44
閱讀 7422·2021-09-22 15:00
閱讀 4462·2021-09-02 10:20
閱讀 1944·2021-08-27 16:20
閱讀 2385·2019-08-26 14:00
閱讀 2904·2019-08-26 11:44
閱讀 1625·2019-08-23 18:33
閱讀 1852·2019-08-22 17:28
