前言

在我们移动端还有一个很常用的组件，那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难，其实不是的！！这个组件其实可以很简单的就实现出来，而且体验也能非常的棒（当然我们没有实现下拉刷新功能）！！下面我们就一起来实现这个组件。

效果展示

先上一个gif图片展示我们做成后的效果，如下：

DOM结构

页面应该包含三个部分：1. 正文区域 2.加载小菊花以及记载文字 3.所有数据加载完成后的文字：

<p ref="scroll" class="r-scroll">
 <p class="r-scroll-wrap">
 <slot></slot>
 </p>
 <slot name="loading">
 <p v-show="isLoading" class="r-scroll-loading">
 <r-loading></r-loading>
 <span class="r-scroll-loading-text">{{loadingText}}</span>
 </p>
 </slot>
 <slot name="complate">
 <p v-show="isComplate" class="r-scroll-loading">{{complateText}}</p>
 </slot>
</p>

css样式

整个组件的容器r-scroll应该是固定宽度，超出部分可以滚动的；正文区域应该是随着内容，高度自动增长的；加载小菊花在滚动距离底部默认数值的时候显示；所有数据加载完成后显示数据加载完成文字：

<style lang="scss">
@mixin one-screen {
 position: absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 overflow: hidden;
}
@mixin overflow-scroll {
 overflow: scroll;
 -webkit-overflow-scrolling: touch;
}

.r-scroll{
 @include one-screen;
 @include overflow-scroll;
 &-loading{
 text-align: center;
 padding-top: 3vw;
 padding-bottom: 3vw;
 font-size: 14px;
 color: #656565;
 line-height: 20px;
 &-text{
 display: inline-block;
 vertical-align: middle;
 }
 }
}
</style>

javascript

交互逻辑分析：

1. 页面初始化的时候，获取整个组件节点以及正文容器节点

2. 对整个容器节点进行绑定scroll事件

3. 容器进行滚动的过程中判断是否距离顶部小于指定数值，如果小于则触发自定义事件loadmore

4. 业务代码中监听loadmore事件，如果触发则加载数据

因为代码不复杂，故不详细解析，大家看下代码注释，如有不清楚的请在评论中发表评论：

另外该组件中引用到了loading小菊花组件，附录一个小菊花组件代码，因代码简单故不详细解析：

菊花使用的是一张gif图片，请照一张你喜欢的菊花gif放在该菊花组件的路径下

<template>
 <p class="r-loading-container">
 <img src="./loading.gif">
 </p>
</template>
<script>
export default {}
</script>
<style lang="scss">
.r-loading-container{
 display: inline-block;
 vertical-align: middle;
 img{
 width: 20px;
 height: 20px;
 display: block;
 }
}
</style>

写在最后

最后这里附录一个使用例子吧：

<template>
 <p class="index">
 <r-scroll ref="scroll" @loadmore="queryDate">
 <p class="item" v-for="(item, index) in list">{{item}}</p>
 </r-scroll>
 </p>
</template>

<script>
import rScroll from '../../components/scroll'
function timeout (ms) {
 return new Promise((resolve, reject) => {
 setTimeout(resolve, ms, 'done')
 })
}

export default{
 components: {rScroll},
 data () {
 return {
 i: 0,
 list: []
 }
 },
 methods: {
 async queryDate () {
 await timeout(1000)
 let i = this.i
 let data = []
 for (let j = 0; j < 40; j++) {
 data.push(i + j)
 this.i = this.i + 1
 }
 this.list = this.list.concat(data)
 // 调用组件中的loaded函数，如果数据加载完成后记得调用组件的compleate函数
 this.$refs.scroll.loaded()
 }
 },
 mounted () {
 this.queryDate()
 }
}
</script>

<style lang="scss">
.item{
 background-color: #f2f2f2;
 border-bottom: 1px solid #fff;
 height: 40px;
 line-height: 40px;
 text-align: center;
}
</style>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用vue2实现购物车和地址选配功能

Angular开发实践之服务端渲染

vue 实现全选全不选的示例代码