vue怎么實(shí)現(xiàn)滾動(dòng)條加載更多數(shù)據(jù)

這篇“vue怎么實(shí)現(xiàn)滾動(dòng)條加載更多數(shù)據(jù)”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue怎么實(shí)現(xiàn)滾動(dòng)條加載更多數(shù)據(jù)”文章吧。

解析：

判斷滾動(dòng)條到底部，需要用到DOM的三個(gè)屬性值，即scrollTop、clientHeight、scrollHeight。

scrollTop為滾動(dòng)條在Y軸上的滾動(dòng)距離。

clientHeight為內(nèi)容可視區(qū)域的高度。

scrollHeight為內(nèi)容可視區(qū)域的高度加上溢出（滾動(dòng)）的距離。

從這個(gè)三個(gè)屬性的介紹就可以看出來，滾動(dòng)條到底部的條件即為scrollTop + clientHeight == scrollHeight。（兼容不同的瀏覽器）。

代碼：

1.vue的實(shí)現(xiàn)

html:

<div class="questionList-content-list">
   <ul>
    <li v-for="item in questionListData" @click="goDetail(item.id)">
     {{item.create_time}}
     [{{item.level_value}}]
    {{item.description}}
     {{item.status_value}}
    </li>
   </ul>
  </div>

js:

created () {
   var self = this
   $(window).scroll(function () {
    let scrollTop = $(this).scrollTop()
    let scrollHeight = $(document).height()
    let windowHeight = $(this).height()
    if (scrollTop + windowHeight === scrollHeight) {
     self.questionListData.push({
      'id': '62564AED8A4FA7CCDBFBD0F9A11C97A8',
      'type': '0102',
      'type_value': '數(shù)據(jù)問題',
      'description': '撒的劃分空間撒電話費(fèi)看見愛上對(duì)方見客戶速度快解放哈薩克接電話發(fā)生的劃分空間是的哈副科級(jí)哈師大空間劃分可接受的后方可摳腳大漢房間卡收到貨放假多少',
      'status': '0',
      'status_value': '未解決',
      'level': '0203',
      'level_value': '高',
      'content': '過好幾個(gè)號(hào)',
      'userid': 'lxzx_hdsx',
      'create_time': 1480296174000,
      'images': null
     })
     self.questionListData.push({
      'id': 'D679611152737E675984D7681BC94F16',
      'type': '0101',
      'type_value': '需求問題',
      'description': 'a阿斯頓發(fā)生豐盛的范德薩范德薩發(fā)十多個(gè)非官方阿道夫葛根粉v跟下載v',
      'status': '0',
      'status_value': '未解決',
      'level': '0203',
      'level_value': '高',
      'content': '秩序性支出V型從v',
      'userid': 'lxzx_hdsx',
      'create_time': 1480296155000,
      'images': null
     })
     self.questionListData.push({
      'id': 'B5C61D990F962570C34B8EE607CA1384',
      'type': '0104',
      'type_value': '頁面問題',
      'description': '回復(fù)的文本框和字體有點(diǎn)丑',
      'status': '0',
      'status_value': '未解決',
      'level': '0203',
      'level_value': '高',
      'content': '回復(fù)的文本框和字體有點(diǎn)丑',
      'userid': 'lxzx_hdsx',
      'create_time': 1480064620000,
      'images': null
     })
     self.questionListData.push({
      'id': '279F9571CB8DC36F1DEA5C8773F1793C',
      'type': '0103',
      'type_value': '設(shè)計(jì)問題',
      'description': '設(shè)計(jì)bug，不應(yīng)該這樣設(shè)計(jì)。',
      'status': '0',
      'status_value': '未解決',
      'level': '0204',
      'level_value': '非常高',
      'content': '設(shè)計(jì)bug，不應(yīng)該這樣設(shè)計(jì)。你看。',
      'userid': 'lxzx_hdsx',
      'create_time': 1480064114000,
      'images': null
     })
     self.questionListData.push({
      'id': '80E365710CB9157DB24F08C8D2039473',
      'type': '0102',
      'type_value': '數(shù)據(jù)問題',
      'description': '數(shù)據(jù)列表滾動(dòng)條問題',
      'status': '0',
      'status_value': '未解決',
      'level': '0202',
      'level_value': '中',
      'content': '數(shù)據(jù)列表在數(shù)據(jù)條數(shù)比較多的情況下無滾動(dòng)條',
      'userid': 'lxzx_hdsx',
      'create_time': 1480034606000,
      'images': null
     })
     console.log(self.questionListData)
    }
   })
  },

因?yàn)関ue2 實(shí)現(xiàn)了m-v雙向綁定，所以這里直接改變for循環(huán)數(shù)據(jù)源即可實(shí)現(xiàn)列表的數(shù)據(jù)刷新;

2: 普通js的實(shí)現(xiàn)

html：

<div id="content"  class="questionList-content-list"> 
　　<ul> 
　　　　<li class="list"> 
　　　<span測試1</span>
     <span>測試2</span>
     <span>測試3</span>
     <span>測試4</span>
     <span>測試5</span>
     <span>測試6</span>
     <span>測試7</span>
     <span>測試8</span>
     <span>測試9</span>
     <span>測試10</span>
     <span>測試11</span>
　　　　</li> 
　　</ul> 
</div>

js：

var html = ''       //距下邊界長度/單位px
  $(window).scroll(function () {
   var scrollTop = $(this).scrollTop();
   var scrollHeight = $(document).height();
   var windowHeight = $(this).height();
   if (scrollTop + windowHeight == scrollHeight) {
    for(let i=0;i<10;i++){
     html += '<li>Page: ' + i + ', Data Index: ' + i + ' </li>'
    }
    $('#content ul').append(html);
   }
  });

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

以上就是關(guān)于“vue怎么實(shí)現(xiàn)滾動(dòng)條加載更多數(shù)據(jù)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。