微客导航 » 文章资讯 » PHP结合Vue实现滚动底部加载效果

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

2023-09-19 08:09:05 158

前言

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

总结

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