PHP结合Vue实现上拉分页
Posted 一个人的孤独自白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了PHP结合Vue实现上拉分页相关的知识，希望对你有一定的参考价值。
效果图：
<?php if(isset($_GET[\'data\'])){ $data = [ [ \'title\'=>1], [ \'title\'=>2], [ \'title\'=>3], [ \'title\'=>4], [ \'title\'=>5], [ \'title\'=>6], ]; echo json_encode($data);die; } ?> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script> <script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script> <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> <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 = "?data=1" $.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实现上拉分页的主要内容，如果未能解决你的问题，请参考以下文章
Qt qml中listview 列表视图控件（下拉刷新上拉分页滚动轴）
ionic5 上拉分页加载更多ion-infinite-scroll