效果图：
<?phpif(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实现上拉分页
原文地址：https://www.cnblogs.com/-mrl/p/9251654.html