您好,登錄后才能下訂單哦!
小編給大家分享一下vue2如何實(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è)屬性的介紹就可以看出來(lái),滾動(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ù)問(wèn)題', 'description': '撒的劃分空間撒電話費(fèi)看見(jiàn)愛(ài)上對(duì)方見(jiàn)客戶(hù)速度快解放哈薩克接電話發(fā)生的劃分空間是的哈副科級(jí)哈師大空間劃分可接受的后方可摳腳大漢房間卡收到貨放假多少', 'status': '0', 'status_value': '未解決', 'level': '0203', 'level_value': '高', 'content': '過(guò)好幾個(gè)號(hào)', 'userid': 'lxzx_hdsx', 'create_time': 1480296174000, 'images': null }) self.questionListData.push({ 'id': 'D679611152737E675984D7681BC94F16', 'type': '0101', 'type_value': '需求問(wèn)題', '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': '頁(yè)面問(wèn)題', '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ì)問(wèn)題', '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ù)問(wèn)題', 'description': '數(shù)據(jù)列表滾動(dòng)條問(wèn)題', 'status': '0', 'status_value': '未解決', 'level': '0202', 'level_value': '中', 'content': '數(shù)據(jù)列表在數(shù)據(jù)條數(shù)比較多的情況下無(wú)滾動(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測(cè)試1</span> <span>測(cè)試2</span> <span>測(cè)試3</span> <span>測(cè)試4</span> <span>測(cè)試5</span> <span>測(cè)試6</span> <span>測(cè)試7</span> <span>測(cè)試8</span> <span>測(cè)試9</span> <span>測(cè)試10</span> <span>測(cè)試11</span> </li> </ul> </div>
js:
var html = '' //距下邊界長(zhǎng)度/單位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); } });
以上是“vue2如何實(shí)現(xiàn)滾動(dòng)條加載更多數(shù)據(jù)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。