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

效果展示

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

DOM结构

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

{{loadingText}}

{{complateText}}

css样式

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

@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;

}

}

}

javascript

交互逻辑分析：页面初始化的时候，获取整个组件节点以及正文容器节点

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

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

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

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

import rLoading from '../loading'

export default{

components: {rLoading},

props: {

// 距离底部数值，小于或等于该数值触发自定义事件loadmore

bottomDistance: {

type: [Number, String],

default: 70

},

// 加载中的文字

loadingText: {

type: String,

default: '加载中...'

},

// 数据加载完成的文字

complateText: {

type: String,

default: '-- 我是个有底线的列表 --'

}

},

data () {

return {

// 用来判定数据是否加载完成

isComplate: false,

// 用来判定是否正在加载数据

isLoading: false,

// 组件容器

scroll: null,

// 正文容器

scrollWrap: null

}

},

watch: {

// 监听isLoading，如果isLoading的值为true则代表触发了loadmore事件

isLoading (val) {

if (val) {

this.$emit('loadmore')

}

}

},

methods: {

// 初始化组件，获取组件容器、正文容器节点，并给组件容器节点绑定滚动事件

init () {

this.scroll = this.$refs.scroll

this.scrollWrap = this.scroll.childNodes[0]

this.scroll.addEventListener('scroll', this.scrollEvent)

this.$emit('init', this.scroll)

},

scrollEvent (e) {

// 如果数据全部加载完成了，则再也不触发loadmore事件

if (this.isComplate) return

let scrollTop = this.scroll.scrollTop

let scrollH = this.scroll.offsetHeight

let scrollWrapH = this.scrollWrap.offsetHeight

// 组件容器滚的距离 + 组件容器本身距离大于或者等于正文容器高度 - 指定数值 则触发loadmore事件

if (scrollTop + scrollH >= scrollWrapH - this.bottomDistance) {

this.isLoading = true

}

},

// 当前数据加载完成后调用该函数

loaded () {

this.isLoading = false

},

// 所有数据加载完成后调用该函数

compleate () {

this.isLoading = false

this.isComplate = true

this.scroll.removeEventListener('scroll', this.scrollEvent)

}

},

mounted () {

this.$nextTick(this.init)

}

}

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

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

export default {}

.r-loading-container{

display: inline-block;

vertical-align: middle;

img{

width: 20px;

height: 20px;

display: block;

}

}

写在最后

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

{{item}}

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()

}

}

.item{

background-color: #f2f2f2;

border-bottom: 1px solid #fff;

height: 40px;

line-height: 40px;

text-align: center;

}

相关推荐：