前言
最近的一個項目手機端分頁跳轉不理想，自己做了一個滾動加載的一個Demo，下面話不多說了，來一起看看詳細的介紹吧。
實現思路
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>總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對VeVb武林網的支持。
新聞熱點
疑難解答
圖片精選
