前言
最近的一个项目手机端分页跳转不理想,自己做了一个滚动加载的一个Demo,下面话不多说了,来一起看看详细的介绍吧。
实现思路
1.获得滚动条到底部的距离 getScrollBottomHeight()
2.绑定滚动事件handleScroll()
,handleScroll()
判断滚动条到底部距离是否小于设置的bottomHight,并且增加一个loading属性,防止加载时滑动时多次触发,造成多次加载
3.Ajax请求load.PHP,通过Page去查询获得当前页数(page+1)的内容
4.将获取的内容,push 到 list中,完成后Vue 自动渲染新的列表,loading变为false
核心Dom结构
rush:xhtml;">