这篇文章主要介绍了vue移动ui框架滑动加载的方法，现在分享给大家，也给大家做个参考。
前言
在我们移动端还有一个很常用的组件，那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难，其实不是的！！这个组件其实可以很简单的就实现出来，而且体验也能非常的棒（当然我们没有实现下拉刷新功能）！！下面我们就一起来实现这个组件。
效果展示
先上一个gif图片展示我们做成后的效果，如下：
立即学习“前端免费学习笔记（深入）”；
DOM结构
页面应该包含三个部分：1. 正文区域 2.加载小菊花以及记载文字 3.所有数据加载完成后的文字：
{{loadingText}} {{complateText}}
css样式
整个组件的容器r-scroll应该是固定宽度，超出部分可以滚动的；正文区域应该是随着内容，高度自动增长的；加载小菊花在滚动距离底部默认数值的时候显示；所有数据加载完成后显示数据加载完成文字：
javascript
交互逻辑分析：
页面初始化的时候，获取整个组件节点以及正文容器节点
对整个容器节点进行绑定scroll事件
容器进行滚动的过程中判断是否距离顶部小于指定数值，如果小于则触发自定义事件loadmore
ECTouch移动商城系统下载ECTouch是上海商创网络科技有限公司推出的一套基于 PHP 和 MySQL 数据库构建的开源且易于使用的移动商城网店系统！应用于各种服务器平台的高效、快速和易于管理的网店解决方案，采用稳定的MVC框架开发，完美对接ecshop系统与模板堂众多模板，为中小企业提供最佳的移动电商解决方案。ECTouch程序源代码完全无加密。安装时只需将已集成的文件夹放进指定位置，通过浏览器访问一键安装，无需对已有
业务代码中监听loadmore事件，如果触发则加载数据
因为代码不复杂，故不详细解析，大家看下代码注释，如有不清楚的请在评论中发表评论：
另外该组件中引用到了loading小菊花组件，附录一个小菊花组件代码，因代码简单故不详细解析：
菊花使用的是一张gif图片，请照一张你喜欢的菊花gif放在该菊花组件的路径下
写在最后
最后这里附录一个使用例子吧：
{{item}}
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
