您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue2怎么實(shí)現(xiàn)滾動(dòng)條加載更多數(shù)據(jù)”,在日常操作中,相信很多人在vue2怎么實(shí)現(xiàn)滾動(dòng)條加載更多數(shù)據(jù)問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對(duì)大家解答”vue2怎么實(shí)現(xiàn)滾動(dòng)條加載更多數(shù)據(jù)”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
解析:
判斷滾動(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è)屬性的介紹就可以看出來,滾動(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ù)問題', 'description': '撒的劃分空間撒電話費(fèi)看見愛上對(duì)方見客戶速度快解放哈薩克接電話發(fā)生的劃分空間是的哈副科級(jí)哈師大空間劃分可接受的后方可摳腳大漢房間卡收到貨放假多少', 'status': '0', 'status_value': '未解決', 'level': '0203', 'level_value': '高', 'content': '過好幾個(gè)號(hào)', 'userid': 'lxzx_hdsx', 'create_time': 1480296174000, 'images': null }) self.questionListData.push({ 'id': 'D679611152737E675984D7681BC94F16', 'type': '0101', 'type_value': '需求問題', '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': '頁面問題', '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ì)問題', '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ù)問題', 'description': '數(shù)據(jù)列表滾動(dòng)條問題', 'status': '0', 'status_value': '未解決', 'level': '0202', 'level_value': '中', 'content': '數(shù)據(jù)列表在數(shù)據(jù)條數(shù)比較多的情況下無滾動(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測試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); } });
到此,關(guān)于“vue2怎么實(shí)現(xiàn)滾動(dòng)條加載更多數(shù)據(jù)”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。