PHP结合Vue实现滚动底部加载效果
2018-09-07 13:43
前言
最近的一个项目手机端分页跳转不理想，自己做了一个滚动加载的一个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 } //滚动条顶 高度atMode == CSS1Compat) { windowHeight = document.documentElement.clientHeight; } else { windowHeight = document.body.clientHeight; } return windowHeight; } </script>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
文章标题：PHP结合Vue实现滚动底部加载效果
文章链接：http://soscw.com/index.php/essay/12863.html