PHP结合Vue实现滚动底部加载效果


Posted in PHP onDecember 17, 2017

前言

最近的一个项目手机端分页跳转不理想,自己做了一个滚动加载的一个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>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

PHP 相关文章推荐
聊天室php&amp;mysql(五)
Oct 09 PHP
PHP中spl_autoload_register函数的用法总结
Nov 07 PHP
从PHP的源码中深入了解stdClass类
Apr 18 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
Jul 01 PHP
PHP实现获取域名的方法小结
Nov 05 PHP
Web程序工作原理详解
Dec 25 PHP
php防止用户重复提交表单
Nov 02 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
Jul 21 PHP
Zend Framework基本页面布局分析
Mar 19 PHP
php中final关键字用法分析
Dec 07 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
Nov 24 PHP
PHP 应用容器化以及部署方法
Feb 12 PHP
PHP7下协程的实现方法详解
Dec 17 #PHP
浅谈PHP实现大流量下抢购方案
Dec 15 #PHP
PHP实现数组的笛卡尔积运算示例
Dec 15 #PHP
PHP中OpenSSL加密问题整理
Dec 14 #PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
Dec 14 #PHP
THINKPHP3.2使用soap连接webservice的解决方法
Dec 13 #PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
Dec 13 #PHP
You might like
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
JavaScript File分段上传
2016/03/10 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
Python创建系统目录的方法
2015/03/11 Python
python uuid模块使用实例
2015/04/08 Python
python 基础教程之Map使用方法
2017/01/17 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
python+OpenCV实现图像拼接
2020/03/05 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
美国零售商店:Blue&Cream
2017/04/07 全球购物
美国高端医师级美容产品电商:BeautifiedYou.com
2017/04/17 全球购物
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
学校开除通知书
2015/04/25 职场文书
大学开学感言
2015/08/01 职场文书
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技