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

前端  /  管理员 发布于 3年前   138

前言

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

实现思路

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

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

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

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

核心Dom结构

   
   
{{l.title}}
   
加载中
  
 

Javascript代码

总结

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

您可能感兴趣的文章:

• vue+php实现的微博留言功能示例
• vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
• thinkphp集成前端脚手架Vue-cli的教程图解
• vue.js过滤器+ajax实现事件监听及后台php数据交互实例
• Vue 项目中遇到的跨域问题及解决方法(后台php)
• php和vue配合使用技巧和方法