介绍 & lt; body>
& lt; div id=癈ontent"祝辞
,& lt; div>
& lt;才能ul>
,,& lt; li v=發 拷贝list"在{{l.title}} & lt;/li>
,,& lt; li 类=發oading", v=發oading"在加载中& lt;/li>
& lt;才能/ul>
,& lt;/div>
& lt;/div>
& lt;/body> & lt; script>
,var v =, Vue ({new
el才能:“# Content",
,,数据:{
,,,列表:[{标题:,“使用思维导图,优雅的完成自己的代码,},
,,,{标题:,“左滑右滑的乐趣,},
,,,{标题:,“Spring 云(九)高可用的分布式配置中心,Spring Cloud Config 集成,Eureka 服务q"},
,,,{标题:,“【MYSQL】业务上碰到的SQL问题整理集合“},
,,,{标题:,“2018年,前端应该怎么学?“},
,,,{标题:,“前端,ajax 请求的优雅方案,},
,,,{标题:,“SegmentFault 技术周刊,Vol.39 作用;什么!服务器炸了?“},
,,,{标题:,“Rokid 开发板试用,开启你的嵌入式开发之旅“},
,,,{标题:,“我脑中飘来飘去的css魔幻属性“},
,,,{标题:,“用python解决mysql视图导入导出依赖问题,},
,,,{标题:,“underscore 系列之防冲突与,Utility Functions"},
,,,{标题:,“基于手淘,flexible 的,Vue 组件:TextScroll ,,文字滚动“},
,,,{标题:,“基”于老板直聘的招聘信息& # 39;分析企业到底需要什么样的PHP程序员“},
,,,{标题:,“原生js系列之无限循环轮播组件,},
,,,{标题:,“一篇文章了解HTML文档流(normal 流)“},
,,,{标题:,“面试官最爱的不稳定的关键字“},
,,,{标题:,“Spring 云(九)高可用的分布式配置中心,Spring Cloud Config 集成,Eureka 服务q"},
,,,{标题:,“【MYSQL】业务上碰到的SQL问题整理集合“},
,,,{标题:,“2018年,前端应该怎么学?“},
,,,{标题:,“前端,ajax 请求的优雅方案,},
,,,{标题:,“SegmentFault 技术周刊,Vol.39 作用;什么!服务器炸了?“},
,,,{标题:,“Rokid 开发板试用,开启你的嵌入式开发之旅“},
,,,{标题:,“我脑中飘来飘去的css魔幻属性“},
,,,{标题:,“用python解决mysql视图导入导出依赖问题,},
,,,{标题:,“underscore 系列之防冲突与,Utility Functions"},
,,,{标题:,“基于手淘,flexible 的,Vue 组件:TextScroll ,,文字滚动“},
,,,{标题:,“基”于老板直聘的招聘信息& # 39;分析企业到底需要什么样的PHP程序员“},
,,,{标题:,“原生js系列之无限循环轮播组件,},
,,,{标题:,“一篇文章了解HTML文档流(normal 流)“},
,,,{标题:,“面试官最爱的不稳定的关键字“},
,,,{标题:,“Rokid 开发板试用,开启你的嵌入式开发之旅“}),
,,,页面:5//总页数
,,,nowPage: 1//本页
,,,加载:假的,//一步加载时的限制
,,,bottomHight: 50,//滚动条到某个位置才触发时间
,,},
方法:才能,{
,,,handleScroll: function (), {
,,,if (getScrollBottomHeight (), & lt;=, v.bottomHight ,,, v.nowPage & lt;, v.page ,,, v.loading ==, false), {
,,,,v.loading =,真的
,,,,var url =,“load.php"
,,,,. ajax({美元
,,,,,类型:,“GET",
,,,,,url:,网址,
,,,,,异步:,真的,
,,,,,数据类型:,“json"
,,,,,成功:,function (数据),{
,,,,,,for (var 小姐:=,0;,小姐:& lt;, data.length;,我+ +),{
,,,,,,,v.list.push(数据[我])
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
本篇文章给大家分享的是有关怎么在PHP中利用Vue实现一个底部滚动加载效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
<强>实现思路
,,,,1.获得滚动条到底部的距离<代码> getScrollBottomHeight()
,,,,2 .绑定滚动事件<代码> handleScroll() ,<代码> handleScroll() 判断滚动条到底部距离是否小于设置的bottomHight,并且增加一个加载属性,防止加载时滑动时多次触发,造成多次加载
,,,,3. ajax请求load.php,通过页面去查询获得当前页数(+ 1页)的内容
,,,,4.将获取的内容,推到列表中,完成后Vue自动渲染新的列表,加载变为假
<强>核心Dom结构
<强> Javascript代码
