下拉加载dropload.js

2021-08-16 05:44:46

使用下拉加载

使用需要引用的css

<link rel="stylesheet" href="../dist/dropload.css">

使用需要引用的js

<!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 -->
<script src="js/zepto.min.js"></script>
<script src="../dist/dropload.min.js"></script>

使用方法：网上有很多再次就不展开了

主要记录一下bug以及修改

1.bug：刚进去页面的时候出现上拉加载字样，然后上拉页面才会出现加载中...

理想效果：刚进来页面直接是加载中...字样

bug原因以及修改：原因是给本区域的最外层div设置了高度，把设置的高度去掉就可以了。还有一个原因可能是提前加载距离threshold:50 数字可以大一点，修改为100。

2.由于部分Android中UC和QQ浏览器头部有地址栏，并且一开始滑动页面隐藏地址栏时，无法触发scroll和resize，所以会导致部分情况无法使用。

解决方案1：增加distance距离，例如DEMO2中distance:50；

解决方案2：加meta使之全屏显示

码农公寓