Vue2 scroll bar loads more data implementation code, vue2 scroll bar loads code

Vue2 scroll bar loads more data implementation code, vue2 scroll bar loads code

Resolution:

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

ScrollTop indicates the scroll distance of the scroll bar on the Y axis.

ClientHeight is the height of the visible area of the content.

ScrollHeight is the height of the visible area of the content plus the overflow (scroll) distance.

From the introduction of these three attributes, we can see that the condition from the scroll bar to the 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 previous wheight = $ (this ). height () if (scrollTop + windowHeight = scrollHeight) {self. questionListData. push ({'id': '62564aed8a4fa7ccdbfbd0f9a11c97a8 ', 'type': '000000', 'Type _ value': 'Data problem', 'description ': 'sa's Division of space, and the telephone fee. Seeing that the customer is in love with each other, the customer's speed is fast. The Division of space where the phone is answered by Kazakh. How many holidays can be received in the room? ', 'status': '0', 'status _ value': 'unsolved', 'level': '123 ', 'Level _ value': 'high', 'content': 'number of digits', 'userid': 'lxzx _ hdsx', 'create _ time': 1480296174000, 'images': null}) self. questionListData. push ({'id': 'd679611152737e675984d7681bc94f16', 'type': '000000', 'Type _ value': 'demand question ', 'description ': 'A Aston has experienced a great deal of fandesa and sent more than a dozen unofficial scavenger fans v and downloaded v ', 'status': '0', 'status _ value ': 'unsolved ', 'level': '123 ', 'Level _ value': 'high', 'content': 'sequence expenditure v-type From v', 'userid': 'lxzx _ hdsx', 'create _ time': 1480296155000, 'images': null}) self. questionListData. push ({'id': 'b5c61d990f962570c34b8ee607ca1384 ', 'type': '000000', 'Type _ value': 'page question', 'description ': 'reply text box and font a bit ugly ', 'status': '0', 'status _ value': 'unsolved', 'level': '123 ', 'Level _ value': 'high', 'content': 'reply text box and font a bit ugly ', 'userid': 'lxzx _ hdsx', 'create _ time ': 1480 064620000, 'images': null}) self. questionListData. push ({'id': '279f9571cb8dc36f1dea5c8773f1793c ', 'type': '000000', 'Type _ value': 'Design question', 'description': 'Design bug, it should not be designed like this. ', 'Status': '0', 'status _ value': 'unresolved', 'level': '000000', 'level _ value': 'very high ', 'content': 'Design bug. It should not be designed like this. You see. ', 'Userid': 'lxzx _ hdsx', 'create _ time': 1480064114000, 'images': null}) self. questionListData. push ({'id': '80e365710cb9157db24f08c8d2039473 ', 'type': '000000', 'Type _ value': 'Data problem', 'description ': 'Data list scroll bar problem ', 'status': '0', 'status _ value': 'unsolved', 'level': '123', 'level _ value ': '中', 'content': 'If the number of data entries in the data list is large, there is no scroll bar ', 'userid': 'lxzx _ hdsx', 'create _ time ': 1480034606000, 'images': null}) console. log (self. questionListData )}})},

Because vue2 implements m-v bidirectional binding, you can directly change the for Loop Data Source to refresh the data in the list;

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 = ''// the length from the bottom boundary/unit: px $ (window ). scroll (function () {var scrollTop = $ (this ). scrollTop (); var scrollHeight = $ (document ). height (); var returns wheight = $ (this ). height (); if (scrollTop + always wheight = scrollHeight) {for (let I = 0; I <10; I ++) {html + = '<li> Page: '+ I +', Data Index: '+ I +' </li> '} $ (' # content ul '). append (html );}});

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.