vue2 scroll bar loading more data implementation code

Analysis:

To judge the scroll bar to the bottom, three attribute values of DOM are needed, namely scrollTop, clientHeight and scrollHeight.

scrollTop is the scroll distance of the scroll bar on the Y axis.

clientHeight is the height of the visual area of the content.

scrollHeight is the height of the visual area of the content plus the overflow (scrolling) distance.

From the introduction of these three attributes, it can be seen that the condition from scroll bar to bottom is scrollTop + clientHeight = = scrollHeight. Compatible with different browsers.

Code:

1. Implementation of vue

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': ' Data problem ',
      'description': ' Scatter the division space, scatter the telephone bill, see fall in love with each other, see the customer quickly, liberate Kazakhstan, answer the phone, divide the space, is Harbin deputy department-level Harbin Normal University, divide the space, and accept the rear side before you can stingy the big fellow room card. How much is the holiday when you receive the goods ',
      'status': '0',
      'status_value': ' Unresolved ',
      'level': '0203',
      'level_value': ' Gao ',
      'content': ' Over several numbers ',
      'userid': 'lxzx_hdsx',
      'create_time': 1480296174000,
      'images': null
     })
     self.questionListData.push({
      'id': 'D679611152737E675984D7681BC94F16',
      'type': '0101',
      'type_value': ' Demand problem ',
      'description': 'a Aston has a rich van der Sar van der Sar hair 10 Multiple unofficial Adolf Pueraria lobata powder v Follow Download v',
      'status': '0',
      'status_value': ' Unresolved ',
      'level': '0203',
      'level_value': ' Gao ',
      'content': ' Orderly expenditure V Type slave v',
      'userid': 'lxzx_hdsx',
      'create_time': 1480296155000,
      'images': null
     })
     self.questionListData.push({
      'id': 'B5C61D990F962570C34B8EE607CA1384',
      'type': '0104',
      'type_value': ' Page problem ',
      'description': ' The text box and font of the reply are a bit ugly ',
      'status': '0',
      'status_value': ' Unresolved ',
      'level': '0203',
      'level_value': ' Gao ',
      'content': ' The text box and font of the reply are a bit ugly ',
      'userid': 'lxzx_hdsx',
      'create_time': 1480064620000,
      'images': null
     })
     self.questionListData.push({
      'id': '279F9571CB8DC36F1DEA5C8773F1793C',
      'type': '0103',
      'type_value': ' Design problem ',
      'description': ' Design bug , should not be designed like this. ',
      'status': '0',
      'status_value': ' Unresolved ',
      'level': '0204',
      'level_value': ' Very high ',
      'content': ' Design bug , should not be designed like this. Look. ',
      'userid': 'lxzx_hdsx',
      'create_time': 1480064114000,
      'images': null
     })
     self.questionListData.push({
      'id': '80E365710CB9157DB24F08C8D2039473',
      'type': '0102',
      'type_value': ' Data problem ',
      'description': ' Data list scroll bar problem ',
      'status': '0',
      'status_value': ' Unresolved ',
      'level': '0202',
      'level_value': ' Medium ',
      'content': ' There is no scroll bar in the data list when the number of data bars is large ',
      'userid': 'lxzx_hdsx',
      'create_time': 1480034606000,
      'images': null
     })
     console.log(self.questionListData)
    }
   })
  },

Because vue2 realizes m-v bidirectional binding, the data refresh of the list can be realized by directly changing the for circular data source;

2: Implementation of common js

html:

<div id="content" style="height:960px" class="questionList-content-list"> 
 　　 <ul> 
   　　 　 　 <li class="list"> 
  　　 　 <span Test 1</span>
     <span> Test 2</span>
     <span> Test 3</span>
     <span> Test 4</span>
     <span> Test 5</span>
     <span> Test 6</span>
     <span> Test 7</span>
     <span> Test 8</span>
     <span> Test 9</span>
     <span> Test 10</span>
     <span> Test 11</span>
   　　 　 　 </li> 
 　　 </ul> 
</div>

js:

var html = ''       // Length from lower boundary / Unit 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);
   }
  });