摘要：前言在我们移动端还有一个很常用的组件，那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难，其实不是的这个组件其实可以很简单的就实现出来，而且体验也能非常的棒当然我们没有实现下拉刷新功能下面我们就一起来实现这个组件。
前言
在我们移动端还有一个很常用的组件，那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难，其实不是的！！这个组件其实可以很简单的就实现出来，而且体验也能非常的棒（当然我们没有实现下拉刷新功能）！！下面我们就一起来实现这个组件。
效果展示先上一个gif图片展示我们做成后的效果，如下：
页面应该包含三个部分：1. 正文区域 2.加载小菊花以及记载文字 3.所有数据加载完成后的文字：
css样式{{loadingText}}
整个组件的容器r-scroll应该是固定宽度，超出部分可以滚动的；正文区域应该是随着内容，高度自动增长的；加载小菊花在滚动距离底部默认数值的时候显示；所有数据加载完成后显示数据加载完成文字：
javascript交互逻辑分析：
页面初始化的时候，获取整个组件节点以及正文容器节点
对整个容器节点进行绑定scroll事件
容器进行滚动的过程中判断是否距离顶部小于指定数值，如果小于则触发自定义事件loadmore
业务代码中监听loadmore事件，如果触发则加载数据
因为代码不复杂，故不详细解析，大家看下代码注释，如有不清楚的请在评论中发表评论：
另外该组件中引用到了loading小菊花组件，附录一个小菊花组件代码，因代码简单故不详细解析：
菊花使用的是一张gif图片，请照一张你喜欢的菊花gif放在该菊花组件的路径下
写在最后
最后这里附录一个使用例子吧：
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93346.html
摘要：的结构如下样式我们这里让正文占据视图的，然后按钮容器靠右绝对定位，然后再把向右移动，这样就刚好衔接在后面。当向左滑动的时候，向左移动，显示出来。 前言 前几天因为项目需要，用jquery写了一个swiperOut组件，然后我就随便把这个组件翻译成基于Vue的了，有兴趣的朋友可以看下。Github源码（不麻烦的话帮忙start，请各位大爷赏个星星） demo展示 效果展示 老规矩，先上效...
摘要：的结构如下样式我们这里让正文占据视图的，然后按钮容器靠右绝对定位，然后再把向右移动，这样就刚好衔接在后面。当向左滑动的时候，向左移动，显示出来。 前言 前几天因为项目需要，用jquery写了一个swiperOut组件，然后我就随便把这个组件翻译成基于Vue的了，有兴趣的朋友可以看下。Github源码（不麻烦的话帮忙start，请各位大爷赏个星星） demo展示 效果展示 老规矩，先上效...
摘要：的结构如下样式我们这里让正文占据视图的，然后按钮容器靠右绝对定位，然后再把向右移动，这样就刚好衔接在后面。当向左滑动的时候，向左移动，显示出来。 前言 前几天因为项目需要，用jquery写了一个swiperOut组件，然后我就随便把这个组件翻译成基于Vue的了，有兴趣的朋友可以看下。Github源码（不麻烦的话帮忙start，请各位大爷赏个星星） demo展示 效果展示 老规矩，先上效...
摘要：最后提醒下，代码中使用而非的原因是为了启动移动端手机的动画加速，提升动画流畅度。 前言 最近面试发现很多前端程序员都从来没有写过插件的经验，基本上都是网上百度。所以打算写一系列文章，手把手的教一些没有写过组件的兄弟们如何去写插件。本系列文章都基于VUE，核心内容都一样，会了之后大家可以快速的改写成react、angular或者是小程序等组件。这篇文章是第一篇，写的是一个类似QQ的侧边菜...
阅读 3465·2021-10-18 13:30
阅读 2900·2021-10-09 09:44
阅读 1932·2019-08-30 11:26
阅读 2263·2019-08-29 13:17
阅读 742·2019-08-29 12:17
阅读 2223·2019-08-26 18:42
阅读 447·2019-08-26 13:24
阅读 2891·2019-08-26 11:39
