当前位置： 移动技术网 > IT编程>开发语言>PHP > PHP结合Vue实现滚动底部加载效果

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

2018年01月27日  | 移动技术网IT编程  | 我要评论

疯狂原始人迅雷下载,手信网,公车情缘

前言

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网