PHP结合Vue实现滚动底部加载效果
前言
最近的一个项目手机端分页跳转不理想，自己做了一个滚动加载的一个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
}
//滚动条顶 高度
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>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
Vue.js上下滚动加载组件的实例代码
由于工作的需要并鉴于网上的vue.js滚动加载方案不合适,自己写了一个简单实用的.就短短的150行代码. 组件代码 // scrollLoader.vue // 滚动加载组件 <style scoped> .container-main {margin: 0 auto; overflow: auto; overflow-x: hidden; padding: 0;} .loading{ width: 100%; height: 40px; position: relative; overflo
-
vue中实现滚动加载更多的示例
在以前的前端刀耕火种时代要实现滚动加载更多想要大家都是很快实现了,在vue会有一点麻烦,最近自己研究了一下,做了一个简单的demo,供大家参考: <template> <div> <ul> <li v-for="item in articles"> <h2>{{item.title}}</h2> <img :src="item.images" alt=""> &l
-
vue实现ajax滚动下拉加载，同时具有loading效果(推荐)
代码如下所示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>vue测试ajax的使用</title> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-
-
vue2滚动条加载更多数据实现代码
解析: 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight.(兼容不同的浏览器). 代码: 1.vue的实现 html: <d
-
PHP结合Vue实现滚动底部加载效果
前言 最近的一个项目手机端分页跳转不理想,自己做了一个滚动加载的一个Demo,下面话不多说了,来一起看看详细的介绍吧. 实现思路 1.获得滚动条到底部的距离 getScrollBottomHeight() 2.绑定滚动事件handleScroll() ,handleScroll()判断滚动条到底部距离是否小于设置的bottomHight,并且增加一个loading属性,防止加载时滑动时多次触发,造成多次加载 3.Ajax请求load.php,通过Page去查询获得当前页数(page+1)的内容
-
vue之项目中如何封装loading加载效果
目录 vue封装loading加载效果 Loading.vue loading.js main.js中导入并使用 项目中使用Loading加载 总结 vue封装loading加载效果 使用两个文件,vue文件是loading加载效果页面,JS文件用于main.js中use,供全局使用 Loading.vue <template> <div v-if="show" class="loading-container"> <div class
-
vue底部加载更多的实例代码
要实现的效果如下: <template> <div class="newsList"> <div v-for="(items, index) in newsList"> <div class="date">{{showDay(index)}}</div> <div class="list" > <ul> <li class="l
-
XRecyclerView实现下拉刷新、滚动到底部加载更多等功能
介绍: 一个实现了下拉刷新,滚动到底部加载更多以及添加header功能的的RecyclerView.使用方式和RecyclerView完全一致,不需要额外的layout,不需要写特殊的adater. 加载效果内置了AVLoadingIndicatorView上的所有效果,可以根据需要指定. 项目地址:https://github.com/jianghejie/XRecyclerView 效果: 使用: xml <RelativeLayout xmlns:android="http://sc
-
vue实现滑动到底部加载更多效果
本文实例为大家分享了vue实现滑动到底部加载更多的具体代码,供大家参考,具体内容如下 思路: 如果可视区的高度域dom元素的getBoundingClientRect().bottom高度相同说明已经到了底部,可以实现加载了 template: <template> <div class="content"> <div class="logo"> <div> <img v-if="server[0].t
-
vue实现纯前端表格滚动分页加载
本文实例为大家分享了vue实现表格滚动分页加载的具体代码,供大家参考,具体内容如下 实现效果 实现过程 <div style="width: 100%; overflow: hidden; position: relative" id="container" ref="container" @mousewheel="handleScroll" :style="{ heig
-
vue loadmore 组件滑动加载更多源码解析
上一篇讲到在项目中使用上拉加载更多组件,但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题,我们有时候也会换成滑动到底部自动加载的功能. 既然都是加载更多,很多代码思想势必相似,主要区别在于上拉和滑动到底部这个操作上,所以,我们需要注意: 上拉加载是point指针touch触摸事件,现在因为是滑动加载,需要添加scroll事件去监听然后执行相应回调 上拉加载主要计算触摸滚动距离,滑动加载主要计算containe
-
Vue中的无限加载vue-infinite-loading的方法
本文介绍了Vue中的无限加载vue-infinite-loading的方法,分享给大家,具体如下: 注意:vue-infinite-loading2.0只能在Vue.js2.0中使用.如果你想在Vue.js1.0中使用,请安装vue-infinite-loading1.3版本 如何安装 npm install vue-infinite-loading --save 导入方式 es6模块导入方式 import InfiniteLoading from 'vue-infinite-loading';
-
Vue实现一个无限加载列表功能
一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表无限加载</title> <style> * { margin: 0; padding: 0; } li { height: 50px; border-bottom: 1px s
-
如何让vue长列表快速加载
vue-long-list-load,满足特殊条件的长列表加载.支持:1.各个节点高度不同且可自由设定 2.各个节点可修改不影响加载效果 3.可精确的滚动到指定位置. 背景 有个长列表渲染的需求,本来用vue-virtual-scroll-list的.但是每个节点的高度不一样,用着有点问题.如果也有相应的需求可以参考下我的方案.欢迎大家交流! vue-long-list-load 满足特殊条件的的长列表加载. 列表内各个节点高度不一,各个节点可以进行修改,定位到指定位置指定节点. www.npm