起因
PC端中大量使用 jquery.nicescroll 滚动条，现需实现列表瀑布流加载
实现过程
1、查看<code>API</code>，希望能直接找到加载至底部事件
检索后发现针对插件参数设置、加载样式描述十分详细，但关于事件描述较少
部分参数设置截图，更多需参考尾页链接
经调试、观察源码确定滚动事件方法可获取当前滚动条高度
debugger
部分源码
$("#xxxxx").getNiceScroll(0).scrollend(function (info) {
console.log(info.current.y);
}
将捕获当前高度与全局高度对比
if ($("#xxxxx").getNiceScroll(0).page.maxh == info.current.y) {
console.log("已到达页面底端");
}
2、触发该事件后，给予提示并加载新的内容
//判断是否已全部加载
if (vm.imageUrl.length == vm.imageAllCount) {
loading("over");
return;
} else {
loading("load");
//加载下一批数据
loadImage(vm.imagePage);
}
示例
使用之前抓取得少量知乎头像，实现瀑布流加载
示例
示例链接
源码拷贝，直接保存<code>.html</code>格式即可浏览，若图片显示为X，可能是网速，也可能被墙......
源码涉及插件及版本
<!-- 引入样式 -->
<link href="https://cdn.bootcss.com/iview/2.0.0-rc.19/styles/iview.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<!-- 引入Vue -->
<script src="https://cdn.bootcss.com/vue/2.4.1/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.bootcss.com/iview/2.0.0-rc.19/iview.min.js"></script>
<!-- 引入滚动条-->
<script src="https://cdn.bootcss.com/jquery.nicescroll/3.7.6/jquery.nicescroll.js"></script>
