前言
最近的一個(gè)項(xiàng)目手機(jī)端分頁跳轉(zhuǎn)不理想，自己做了一個(gè)滾動加載的一個(gè)Demo，下面話不多說了，來一起看看詳細(xì)的介紹吧。
實(shí)現(xiàn)思路
1.獲得滾動條到底部的距離 getScrollBottomHeight()
2.綁定滾動事件handleScroll() ，handleScroll()判斷滾動條到底部距離是否小于設(shè)置的bottomHight，并且增加一個(gè)loading屬性，防止加載時(shí)滑動時(shí)多次觸發(fā)，造成多次加載
3.Ajax請求load.php，通過Page去查詢獲得當(dāng)前頁數(shù)（page+1）的內(nèi)容
4.將獲取的內(nèi)容，push 到 list中，完成后Vue 自動渲染新的列表，loading變?yōu)閒alse
核心Dom結(jié)構(gòu)
<body>
<div id="Content">
<div>
<ul>
<li v-for="l in list">{{l.title}}</li>
<li class="loading" v-if="loading">加載中</li>
</ul>
</div>
</div>
</body>
Javascript代碼
<script>
var v = new Vue({
el: "#Content",
data: {
list: [{title: "使用思維導(dǎo)圖，優(yōu)雅的完成自己的代碼"},
{title: "左滑右滑的樂趣"},
{title: "Spring Cloud（九）高可用的分布式配置中心 Spring Cloud Config 集成 Eureka 服務(wù)q"},
{title: "【MYSQL】業(yè)務(wù)上碰到的SQL問題整理集合"},
{title: "2018年，前端應(yīng)該怎么學(xué)？"},
{title: "前端 ajax 請求的優(yōu)雅方案"},
{title: "SegmentFault 技術(shù)周刊 Vol.39 - 什么！服務(wù)器炸了？"},
{title: "Rokid 開發(fā)板試用，開啟你的嵌入式開發(fā)之旅"},
{title: "我腦中飄來飄去的css魔幻屬性"},
{title: "用python解決mysql視圖導(dǎo)入導(dǎo)出依賴問題"},
{title: "underscore 系列之防沖突與 Utility Functions"},
{title: "基于手淘 flexible 的 Vue 組件：TextScroll -- 文字滾動"},
{title: "基于‘BOSS直聘的招聘信息'分析企業(yè)到底需要什么樣的PHP程序員"},
{title: "原生js系列之無限循環(huán)輪播組件"},
{title: "一篇文章了解HTML文檔流(normal flow)"},
{title: "面試官最愛的volatile關(guān)鍵字"},
{title: "Spring Cloud（九）高可用的分布式配置中心 Spring Cloud Config 集成 Eureka 服務(wù)q"},
{title: "【MYSQL】業(yè)務(wù)上碰到的SQL問題整理集合"},
{title: "2018年，前端應(yīng)該怎么學(xué)？"},
{title: "前端 ajax 請求的優(yōu)雅方案"},
{title: "SegmentFault 技術(shù)周刊 Vol.39 - 什么！服務(wù)器炸了？"},
{title: "Rokid 開發(fā)板試用，開啟你的嵌入式開發(fā)之旅"},
{title: "我腦中飄來飄去的css魔幻屬性"},
{title: "用python解決mysql視圖導(dǎo)入導(dǎo)出依賴問題"},
{title: "underscore 系列之防沖突與 Utility Functions"},
{title: "基于手淘 flexible 的 Vue 組件：TextScroll -- 文字滾動"},
{title: "基于‘BOSS直聘的招聘信息'分析企業(yè)到底需要什么樣的PHP程序員"},
{title: "原生js系列之無限循環(huán)輪播組件"},
{title: "一篇文章了解HTML文檔流(normal flow)"},
{title: "面試官最愛的volatile關(guān)鍵字"},
{title: "Rokid 開發(fā)板試用，開啟你的嵌入式開發(fā)之旅"}],
page: 5,//總頁數(shù)
nowPage: 1,//本頁
loading: false,//一步加載時(shí)的限制
bottomHight: 50,//滾動條到某個(gè)位置才觸發(fā)時(shí)間
},
methods: {
handleScroll: function () {
if (getScrollBottomHeight() <= v.bottomHight && v.nowPage < v.page && v.loading == false) {
v.loading = true
var url = "load.php"
$.ajax({
type: "GET",
url: url,
async: true,
dataType: "json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
v.list.push(data[i])
}
v.nowPage++
v.loading = false
},
})
}
}
},
})
//添加滾動事件
window.onload = function () {
window.addEventListener('scroll', v.handleScroll)
}
//滾動條到底部的距離
function getScrollBottomHeight() {
return getPageHeight() - getScrollTop() - getWindowHeight();
}
//頁面高度
function getPageHeight() {
return document.querySelector("html").scrollHeight
}
//滾動條頂 高度
function getScrollTop() {
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
function getWindowHeight() {
var windowHeight = 0;
if (document.compatMode == "CSS1Compat") {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
</script>
總結(jié)
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。