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 has encountered an Access Violation at 7C94BD02解决方法
Aug 24 PHP
解析thinkphp基本配置 convention.php
Jun 18 PHP
解析smarty 截取字符串函数 truncate的用法介绍
Jun 20 PHP
三种php连接access数据库方法
Nov 11 PHP
PHP把数字转成人民币大写的函数分享
Jun 30 PHP
PHP实现的memcache环形队列类实例
Jul 28 PHP
Session 失效的原因汇总及解决丢失办法
Sep 30 PHP
php轻松实现文件上传功能
Mar 03 PHP
Zend Framework教程之Bootstrap类用法概述
Mar 14 PHP
php微信开发接入
Aug 27 PHP
ThinkPHP实现简单登陆功能
Apr 28 PHP
php面向对象基础详解【星际争霸游戏案例】
Jan 23 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
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
php use和include区别总结
2019/10/13 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
2015/05/04 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
JavaScript如何操作css
2020/10/24 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
简述Python中的进程、线程、协程
2016/03/18 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
理货员的岗位职责
2013/11/23 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
单位租房协议书范本
2014/12/04 职场文书
中秋晚会致辞
2015/07/31 职场文书