成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【JavaScript系列】vue項(xiàng)目中實(shí)現(xiàn)滾動(dòng)條（具體視窗口的滾動(dòng)條）操作：（1）置底，（2）置于

lovXin / 2402人閱讀

摘要：滾動(dòng)條不會(huì)出現(xiàn)在頭部和底部視窗中。新增功能滾動(dòng)條置底分頁加載的時(shí)候，保持滾動(dòng)條置于上次停留的位置。我們來看一下動(dòng)態(tài)圖，實(shí)現(xiàn)的功能今天只把這個(gè)具體視窗口的滾動(dòng)條的總結(jié)一下，其他兩個(gè)問題，沒有很大的意義。

一、前言

之前寫了一個(gè)happyChat的項(xiàng)目，主要是想學(xué)習(xí)一下socketIO的使用。然后最近在給happyChat做前端優(yōu)化和升級(jí)。發(fā)現(xiàn)第一版做的很low。

需要優(yōu)化的問題：

1、問題1：滾動(dòng)條會(huì)出現(xiàn)在頭部和底部的視窗中，之前固定頭部和固定底部是使用`position:fixed`。

解決方案：body和html禁止`overflow:hidden`，頭部和底部是`position:relative`，聊天視窗使用`overflow: auto`，這樣聊天視窗才會(huì)出現(xiàn)滾動(dòng)條。滾動(dòng)條不會(huì)出現(xiàn)在頭部和底部視窗中。

2、問題2：聊天視窗一次性加載了所有的聊天內(nèi)容，如果數(shù)據(jù)太多會(huì)出現(xiàn)超時(shí)的問題。

解決方案：聊天內(nèi)容查詢使用分頁查詢，一次性查詢20條或者30條。

3、問題3：群聊的時(shí)候，找不到群成員列表。

解決方案：做一個(gè)群信息匯總的組件，包括群成員列表。

新增功能：（1）滾動(dòng)條置底；（2）分頁加載的時(shí)候，保持滾動(dòng)條置于上次停留的位置。

項(xiàng)目【前端】源代碼地址：https://github.com/saucxs/hap...

項(xiàng)目【后端】端源代碼地址：https://github.com/saucxs/hap...

歡迎fork和start。

線上地址：http://chat.chengxinsong.cn/

二、具體【視窗口】的滾動(dòng)條的問題

環(huán)境：vue

我們先來看一下，給滾動(dòng)條添加監(jiān)聽事件，必須在created或者mouted周期中，添加scroll的監(jiān)聽事件。

 mounted: function () {
    window.addEventListener("scroll", this.handleScroll, true);  // 監(jiān)聽（綁定）滾輪滾動(dòng)事件
  },

其中handleScroll事件是methods里的事件：

 handleScroll() {
      this.viewBox = this.$refs.viewBox;
      console.log(this.viewBox.scrollTop, "到頭部的距離-------------------")
      console.log(this.viewBox.scrollHeight, "滾動(dòng)條的總高度-------------------")
    }


注意：div 到頭部的距離 + 屏幕高度 = 可滾動(dòng)的總高度
this.$refs.viewBox取到視窗口的dom對象，必須確定dom加載完畢了。

 
    
        
  • 
          
          
        
    •

如果我們想置底，我們必須將【滾動(dòng)條總高度】賦值給【滾動(dòng)條到頭部的距離】。這樣就置底了。

業(yè)務(wù)是這樣的：（1）當(dāng)進(jìn)入到聊天頁面時(shí)候，這時(shí)候置底。（2）如果翻看之前的聊天記錄，這時(shí)候就不需要置底，保持在當(dāng)前的位置。

1、先解決【進(jìn)入到聊天頁面時(shí)候，這時(shí)候置底】的問題

解決方案：（1）全局設(shè)置一個(gè)標(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就是一個(gè)置底方法。

refresh() {
      setTimeout(() => {
            this.viewBox.scrollTop = this.viewBox.scrollHeight
    }, 100)
},
2、如果翻看之前的聊天記錄，這時(shí)候就【不需要置底，保持在當(dāng)前的位置】

如果不置底，就是一直在保持在頂部。

思路：將加載之前的【數(shù)據(jù)高度】（此時(shí)滾動(dòng)條的總高度）存放在臨時(shí)變量beforeScrollHeight中；將數(shù)據(jù)加載之后的到【頭部的距離】 = 【此時(shí)滾動(dòng)條總高度】- 【臨時(shí)變量beforeScrollHeight】。

看一下代碼實(shí)現(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ù)。
 }

我們來看一下動(dòng)態(tài)圖，實(shí)現(xiàn)的功能

今天只把這個(gè)具體視窗口的滾動(dòng)條的總結(jié)一下，其他兩個(gè)問題，沒有很大的意義。

【上述源碼地址】項(xiàng)目地址：https://github.com/saucxs/hap... ，歡迎fork和start。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109954.html

相關(guān)文章

  • css - 收藏集 - 掘金

    摘要：絕對底部前端掘金來自國外的設(shè)計(jì)達(dá)人，純，可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設(shè)計(jì)達(dá)人，純CSS，可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí)，底部位于窗口最下面。當(dāng)改變窗口高度時(shí)，不會(huì)出現(xiàn)重疊問題。甚至，創(chuàng)造該CSS的人還專門成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

    phpmatt 評論0 收藏0

  • 國內(nèi)存在感最低的前端API——瀏覽器路由

    摘要：最新一直在看關(guān)于和路由這塊的知識(shí)，最終發(fā)現(xiàn)這些路由框架的模塊功能的實(shí)現(xiàn)都是基于瀏覽器原生路由的。在瀏覽器中實(shí)現(xiàn)前端路由主要有兩種方式一個(gè)是我們常用的，另一個(gè)是提供的。該對象的和分別表示的各個(gè)部分，它們因此被稱為分解屬性。 最新一直在看關(guān)于 Vue 和 React 路由這塊的知識(shí)，最終發(fā)現(xiàn)這些路由框架的模塊功能的實(shí)現(xiàn)都是基于瀏覽器原生路由 API?的。本著追根溯源的初心，于是就想著將瀏覽...

    U2FsdGVkX1x 評論0 收藏0

  • 國內(nèi)存在感最低的前端API——瀏覽器路由

    摘要：最新一直在看關(guān)于和路由這塊的知識(shí)，最終發(fā)現(xiàn)這些路由框架的模塊功能的實(shí)現(xiàn)都是基于瀏覽器原生路由的。在瀏覽器中實(shí)現(xiàn)前端路由主要有兩種方式一個(gè)是我們常用的，另一個(gè)是提供的。該對象的和分別表示的各個(gè)部分，它們因此被稱為分解屬性。 最新一直在看關(guān)于 Vue 和 React 路由這塊的知識(shí)，最終發(fā)現(xiàn)這些路由框架的模塊功能的實(shí)現(xiàn)都是基于瀏覽器原生路由 API?的。本著追根溯源的初心，于是就想著將瀏覽...

    tolerious 評論0 收藏0

  • JavaScript 編程精解 中文第三版 十五、處理事件

    摘要：事件與節(jié)點(diǎn)每個(gè)瀏覽器事件處理器被注冊在上下文中。事件對象雖然目前為止我們忽略了它，事件處理器函數(shù)作為對象傳遞事件對象。若事件處理器不希望執(zhí)行默認(rèn)行為通常是因?yàn)橐呀?jīng)處理了該事件，會(huì)調(diào)用事件對象的方法。 來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項(xiàng)目原文：Handling Events 譯者：飛龍 協(xié)議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分...

    Clect 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<