溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關怎么在PHP中利用Vue實現一個底部滾動加載效果，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
實現思路
1.獲得滾動條到底部的距離 getScrollBottomHeight()
2.綁定滾動事件handleScroll() ，handleScroll()判斷滾動條到底部距離是否小于設置的bottomHight，并且增加一個loading屬性，防止加載時滑動時多次觸發，造成多次加載
3.Ajax請求load.php，通過Page去查詢獲得當前頁數（page+1）的內容
4.將獲取的內容，push 到 list中，完成后Vue 自動渲染新的列表，loading變為false
核心Dom結構
<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: "使用思維導圖，優雅的完成自己的代碼"},
{title: "左滑右滑的樂趣"},
{title: "Spring Cloud（九）高可用的分布式配置中心 Spring Cloud Config 集成 Eureka 服務q"},
{title: "【MYSQL】業務上碰到的SQL問題整理集合"},
{title: "2018年，前端應該怎么學？"},
{title: "前端 ajax 請求的優雅方案"},
{title: "SegmentFault 技術周刊 Vol.39 - 什么！服務器炸了？"},
{title: "Rokid 開發板試用，開啟你的嵌入式開發之旅"},
{title: "我腦中飄來飄去的css魔幻屬性"},
{title: "用python解決mysql視圖導入導出依賴問題"},
{title: "underscore 系列之防沖突與 Utility Functions"},
{title: "基于手淘 flexible 的 Vue 組件：TextScroll -- 文字滾動"},
{title: "基于‘BOSS直聘的招聘信息'分析企業到底需要什么樣的PHP程序員"},
{title: "原生js系列之無限循環輪播組件"},
{title: "一篇文章了解HTML文檔流(normal flow)"},
{title: "面試官最愛的volatile關鍵字"},
{title: "Spring Cloud（九）高可用的分布式配置中心 Spring Cloud Config 集成 Eureka 服務q"},
{title: "【MYSQL】業務上碰到的SQL問題整理集合"},
{title: "2018年，前端應該怎么學？"},
{title: "前端 ajax 請求的優雅方案"},
{title: "SegmentFault 技術周刊 Vol.39 - 什么！服務器炸了？"},
{title: "Rokid 開發板試用，開啟你的嵌入式開發之旅"},
{title: "我腦中飄來飄去的css魔幻屬性"},
{title: "用python解決mysql視圖導入導出依賴問題"},
{title: "underscore 系列之防沖突與 Utility Functions"},
{title: "基于手淘 flexible 的 Vue 組件：TextScroll -- 文字滾動"},
{title: "基于‘BOSS直聘的招聘信息'分析企業到底需要什么樣的PHP程序員"},
{title: "原生js系列之無限循環輪播組件"},
{title: "一篇文章了解HTML文檔流(normal flow)"},
{title: "面試官最愛的volatile關鍵字"},
{title: "Rokid 開發板試用，開啟你的嵌入式開發之旅"}],
page: 5,//總頁數
nowPage: 1,//本頁
loading: false,//一步加載時的限制
bottomHight: 50,//滾動條到某個位置才觸發時間
},
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>以上就是怎么在PHP中利用Vue實現一個底部滾動加載效果，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
