当前位置：首页 > PHP教程 > php高级应用 > 列表

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

发布:smiling　来源: PHP粉丝网 　添加日期：2021-08-23 11:35:21　浏览: 评论：0　

这篇文章主要给大家介绍了关于PHP结合Vue如何实现滚动底部加载效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。

前言

最近的一个项目手机端分页跳转不理想，自己做了一个滚动加载的一个Demo，下面话不多说了，来一起看看详细的介绍吧。

实现思路

1.获得滚动条到底部的距离 getScrollBottomHeight()

2.绑定滚动事件handleScroll() ，handleScroll()判断滚动条到底部距离是否小于设置的bottomHight，并且增加一个loading属性，防止加载时滑动时多次触发，造成多次加载

3.Ajax请求load.php，通过Page去查询获得当前页数（page+1）的内容

4.将获取的内容，push 到 list中，完成后Vue 自动渲染新的列表，loading变为false

核心Dom结构

  1. <body> 
  2. <div id="Content"> 
  3.  <div> 
  4.   <ul> 
  5.    <li v-for="l in list">{{l.title}}</li> 
  6.    <li class="loading" v-if="loading">加载中</li> 
  7.   </ul> 
  8.  </div> 
  9. </div> 
  10. </body> 

Javascript代码

  1. <script> 
  2.  var v = new Vue({ 
  3.   el: "#Content", 
  4.   data: { 
  5.    list: [{title: "使用思维导图，优雅的完成自己的代码"}, 
  6.     {title: "左滑右滑的乐趣"}, 
  7.     {title: "Spring Cloud（九）高可用的分布式配置中心 Spring Cloud Config 集成 Eureka 服务q"}, 
  8.     {title: "【MYSQL】业务上碰到的SQL问题整理集合"}, 
  9.     {title: "2018年，前端应该怎么学？"}, 
  10.     {title: "前端 ajax 请求的优雅方案"}, 
  11.     {title: "SegmentFault 技术周刊 Vol.39 - 什么！服务器炸了？"}, 
  12.     {title: "Rokid 开发板试用，开启你的嵌入式开发之旅"}, 
  13.     {title: "我脑中飘来飘去的css魔幻属性"}, 
  14.     {title: "用python解决mysql视图导入导出依赖问题"}, 
  15.     {title: "underscore 系列之防冲突与 Utility Functions"}, 
  16.     {title: "基于手淘 flexible 的 Vue 组件：TextScroll -- 文字滚动"}, 
  17.     {title: "基于‘BOSS直聘的招聘信息'分析企业到底需要什么样的PHP程序员"}, 
  18.     {title: "原生js系列之无限循环轮播组件"}, 
  19.     {title: "一篇文章了解HTML文档流(normal flow)"}, 
  20.     {title: "面试官最爱的volatile关键字"}, 
  21.     {title: "Spring Cloud（九）高可用的分布式配置中心 Spring Cloud Config 集成 Eureka 服务q"}, 
  22.     {title: "【MYSQL】业务上碰到的SQL问题整理集合"}, 
  23.     {title: "2018年，前端应该怎么学？"}, 
  24.     {title: "前端 ajax 请求的优雅方案"}, 
  25.     {title: "SegmentFault 技术周刊 Vol.39 - 什么！服务器炸了？"}, 
  26.     {title: "Rokid 开发板试用，开启你的嵌入式开发之旅"}, 
  27.     {title: "我脑中飘来飘去的css魔幻属性"}, 
  28.     {title: "用python解决mysql视图导入导出依赖问题"}, 
  29.     {title: "underscore 系列之防冲突与 Utility Functions"}, 
  30.     {title: "基于手淘 flexible 的 Vue 组件：TextScroll -- 文字滚动"}, 
  31.     {title: "基于‘BOSS直聘的招聘信息'分析企业到底需要什么样的PHP程序员"}, 
  32.     {title: "原生js系列之无限循环轮播组件"}, 
  33.     {title: "一篇文章了解HTML文档流(normal flow)"}, 
  34.     {title: "面试官最爱的volatile关键字"}, 
  35.     {title: "Rokid 开发板试用，开启你的嵌入式开发之旅"}], 
  36.    page: 5,//总页数 
  37.    nowPage: 1,//本页 
  38.    loading: false,//一步加载时的限制 
  39.    bottomHight: 50,//滚动条到某个位置才触发时间 
  40.   }, 
  41.   methods: { 
  42.    handleScroll: function () { 
  43.     if (getScrollBottomHeight() <= v.bottomHight && v.nowPage < v.page && v.loading == false) { 
  44.      v.loading = true 
  45.      var url = "load.php" 
  46.      $.ajax({ 
  47.       type: "GET", 
  48.       url: url, 
  49.       async: true, 
  50.       dataType: "json", 
  51.       success: function (data) { 
  52.        for (var i = 0; i < data.length; i++) { 
  53.         v.list.push(data[i]) 
  54.        } 
  55.        v.nowPage++ 
  56.        v.loading = false 
  57.       }, 
  58.      }) 
  59.     } 
  60.    } 
  61.   }, 
  62.  
  63.  }) 
  64.  //添加滚动事件 
  65.  window.onload = function () { 
  66.   window.addEventListener('scroll', v.handleScroll) 
  67.  } 
  68.  //滚动条到底部的距离 
  69.  function getScrollBottomHeight() { 
  70.   return getPageHeight() - getScrollTop() - getWindowHeight(); 
  71.  
  72.  } 
  73.  //页面高度 
  74.  function getPageHeight() { 
  75.   return document.querySelector("html").scrollHeight 
  76.  } 
  77.  //滚动条顶 高度 
  78.  function getScrollTop() { 
  79.   var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; 
  80.   if (document.body) { 
  81.    bodyScrollTop = document.body.scrollTop; 
  82.   } 
  83.   if (document.documentElement) { 
  84.    documentScrollTop = document.documentElement.scrollTop; 
  85.   } 
  86.   scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; 
  87.   return scrollTop; 
  88.  } 
  89.  function getWindowHeight() { 
  90.   var windowHeight = 0; 
  91.   if (document.compatMode == "CSS1Compat") { 
  92.    windowHeight = document.documentElement.clientHeight; 
  93.   } else { 
  94.    windowHeight = document.body.clientHeight; 
  95.   } 
  96.   return windowHeight; 
  97.  } 
  98. </script>

Tags: PHP滚动加载 Vue

分享到：

推荐文章

热门文章

最新评论文章