vue 2 滾動條加載更多數據實現

解析：

　　判斷滾動條到底部，須要用到DOM的三個屬性值，即scrollTop、clientHeight、scrollHeight。

　　scrollTop爲滾動條在Y軸上的滾動距離。

　　clientHeight爲內容可視區域的高度。

　　scrollHeight爲內容可視區域的高度加上溢出（滾動）的距離。

　　從這個三個屬性的介紹就能夠看出來，滾動條到底部的條件即爲scrollTop + clientHeight == scrollHeight。（兼容不一樣的瀏覽器）。

代碼：

1.vue的實現

html:

　　

<div class="questionList-content-list">
      <ul>
        <li v-for="item in questionListData" @click="goDetail(item.id)">
          <span>{{item.create_time}}</span>
          <span :class="'level_' + item.level">[{{item.level_value}}]</span>
          <span title="item.description">{{item.description}}</span>
          <span :class="'status_' + item.status ">{{item.status_value}}</span>
        </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': '數據問題',
            'description': '撒的劃分空間撒電話費看見愛上對方見客戶速度快解放哈薩克接電話發生的劃分空間是的哈副科級哈師大空間劃分可接受的後方可摳腳大漢房間卡收到貨放假多少',
            'status': '0',
            'status_value': '未解決',
            'level': '0203',
            'level_value': '高',
            'content': '過好幾個號',
            'userid': 'lxzx_hdsx',
            'create_time': 1480296174000,
            'images': null
          })
          self.questionListData.push({
            'id': 'D679611152737E675984D7681BC94F16',
            'type': '0101',
            'type_value': '需求問題',
            'description': 'a阿斯頓發生豐盛的范德薩范德薩發十多個非官方阿道夫葛根粉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': '回覆的文本框和字體有點醜',
            'status': '0',
            'status_value': '未解決',
            'level': '0203',
            'level_value': '高',
            'content': '回覆的文本框和字體有點醜',
            'userid': 'lxzx_hdsx',
            'create_time': 1480064620000,
            'images': null
          })
          self.questionListData.push({
            'id': '279F9571CB8DC36F1DEA5C8773F1793C',
            'type': '0103',
            'type_value': '設計問題',
            'description': '設計bug，不該該這樣設計。',
            'status': '0',
            'status_value': '未解決',
            'level': '0204',
            'level_value': '很是高',
            'content': '設計bug，不該該這樣設計。你看。',
            'userid': 'lxzx_hdsx',
            'create_time': 1480064114000,
            'images': null
          })
          self.questionListData.push({
            'id': '80E365710CB9157DB24F08C8D2039473',
            'type': '0102',
            'type_value': '數據問題',
            'description': '數據列表滾動條問題',
            'status': '0',
            'status_value': '未解決',
            'level': '0202',
            'level_value': '中',
            'content': '數據列表在數據條數比較多的狀況下無滾動條',
            'userid': 'lxzx_hdsx',
            'create_time': 1480034606000,
            'images': null
          })
          console.log(self.questionListData)
        }
      })
    },

由於vue2 實現了m-v雙向綁定，因此這裏直接改變for循環數據源便可實現列表的數據刷新;

2: 普通js的實現
html：

<div id="content" style="height:960px" 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); } });