前端之家收集整理的这篇文章主要介绍了
PHP结合Vue实现滚动底部加载效果，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
前言
最近的一个项目手机端分页跳转不理想，自己做了一个滚动加载的一个Demo，下面话不多说了，来一起看看详细的介绍吧。
实现思路
1.获得滚动条到底部的距离 getScrollBottomHeight()
2.绑定滚动事件handleScroll() ，handleScroll()判断滚动条到底部距离是否小于设置的bottomHight，并且增加一个loading属性，防止加载时滑动时多次触发，造成多次加载
3.Ajax请求load.PHP，通过Page去查询获得当前页数（page+1）的内容
4.将获取的内容，push 到 list中，完成后Vue 自动渲染新的列表，loading变为false
核心Dom结构
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: "under
score 系列之防冲突与 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;
}
