vue2 scrollbar loads more data implementation code

Analysis:

To determine the scroll bar to the bottom, three attribute values of the DOM need to be used, namely scrollTop, clientHeight, and scrollHeight.

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

clientHeight is the height of the content visual area.

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

From the introduction of these three properties, we can see that the condition for scrolling bar to the bottom is scrollTop + clientHeight == scrollHeight. (Compatible with different browsers).

Code:

Implementation

html:

<div class="questionList-content-list">
   <ul>
    <li v-for="item in questionListData" @click="goDetail()">
     {{item.create_time}}
     [{{item.level_value}}]
    {{}}
     {{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) {
     ({
      'id': '62564AED8A4FA7CCDBFBD0F9A11C97A8',
      'type': '0102',
      'type_value': 'Data Problem',
      'description': 'The space divided by the phone bill is acceptable after the phone card is collected after seeing the customer, and the space divided by Kazakhstan is accepted. The space divided by the Harbin Normal University is accepted. The room card of the big man can receive the goods for the holiday.',
      'status': '0',
      'status_value': 'Unresolved',
      'level': '0203',
      'level_value': 'high',
      'content': 'Passing several numbers',
      'userid': 'lxzx_hdsx',
      'create_time': 1480296174000,
      'images': null
     })
     ({
      'id': 'D679611152737E675984D7681BC94F16',
      'type': '0101',
      'type_value': 'Requirements Issues',
      'description': 'a Aston's rich Vanderthal Vanderthal released more than a dozen unofficial Adolf Pueraria powder v and download v',
      'status': '0',
      'status_value': 'Unresolved',
      'level': '0203',
      'level_value': 'high',
      'content': 'Order expenditure V-shaped from v',
      'userid': 'lxzx_hdsx',
      'create_time': 1480296155000,
      'images': null
     })
     ({
      'id': 'B5C61D990F962570C34B8EE607CA1384',
      'type': '0104',
      'type_value': 'Page Problem',
      'description': 'The text box and fonts of the reply are a bit ugly',
      'status': '0',
      'status_value': 'Unresolved',
      'level': '0203',
      'level_value': 'high',
      'content': 'The text box and fonts of the reply are a bit ugly',
      'userid': 'lxzx_hdsx',
      'create_time': 1480064620000,
      'images': null
     })
     ({
      'id': '279F9571CB8DC36F1DEA5C8773F1793C',
      'type': '0103',
      'type_value': 'Design Problems',
      'description': 'Design bug, this should not be designed.  ',
      'status': '0',
      'status_value': 'Unresolved',
      'level': '0204',
      'level_value': 'Very high',
      'content': 'Design bug, this should not be designed.  Look.  ',
      'userid': 'lxzx_hdsx',
      'create_time': 1480064114000,
      'images': null
     })
     ({
      'id': '80E365710CB9157DB24F08C8D2039473',
      'type': '0102',
      'type_value': 'Data Problem',
      'description': 'Data list scrollbar issue',
      'status': '0',
      'status_value': 'Unresolved',
      'level': '0202',
      'level_value': 'middle',
      'content': 'The data list has no scroll bars when there are a large number of data strips',
      'userid': 'lxzx_hdsx',
      'create_time': 1480034606000,
      'images': null
     })
     ()
    }
   })
  },

Because vue2 implements m-v bidirectional binding, the data refresh of the list can be achieved by directly changing the for loop data source here;

2: Implementation of ordinary js

html：

&lt;div  style="height:960px" class="questionList-content-list"&gt; 
&lt;ul&gt; 
&lt;li class="list"&gt; 
　&lt;spantest1&lt;/span&gt;
     &lt;span&gt;test2&lt;/span&gt;
     &lt;span&gt;test3&lt;/span&gt;
     &lt;span&gt;test4&lt;/span&gt;
     &lt;span&gt;test5&lt;/span&gt;
     &lt;span&gt;test6&lt;/span&gt;
     &lt;span&gt;test7&lt;/span&gt;
     &lt;span&gt;test8&lt;/span&gt;
     &lt;span&gt;test9&lt;/span&gt;
     &lt;span&gt;test10&lt;/span&gt;
     &lt;span&gt;test11&lt;/span&gt;
&lt;/li&gt; 
&lt;/ul&gt; 
&lt;/div&gt;

js：

var html = ''       //Length from the 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&lt;10;i++){
     html += '&lt;li&gt;Page: ' + i + ', Data Index: ' + i + ' &lt;/li&gt;'
    }
    $('#content ul').append(html);
   }
  });

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.