媒介
在我们挪动端另有一个很经常运用的组件，那就是滑动加载更多组件。寻常我们看到的许多插件完成相称庞杂就以为这个组件很难，实在不是的！！这个组件实在能够很简朴的就完成出来，而且体验也能异常的棒（固然我们没有完成下拉革新功用）！！下面我们就一起来完成这个组件。
结果展现
先上一个gif图片展现我们做成后的结果，以下：
DOM构造
页面应当包括三个部份：1. 正文地区 2.加载小菊花以及纪录笔墨 3.一切数据加载完成后的笔墨：
<div ref="scroll" class="r-scroll">
<div class="r-scroll-wrap">
<slot></slot>
</div>
<slot name="loading">
<div v-show="isLoading" class="r-scroll-loading">
<r-loading></r-loading>
<span class="r-scroll-loading-text">{{loadingText}}</span>
</div>
</slot>
<slot name="complate">
<div v-show="isComplate" class="r-scroll-loading">{{complateText}}</div>
</slot>
</div>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
交互逻辑剖析：
- 页面初始化的时刻，猎取悉数组件节点以及正文容器节点
- 对悉数容器节点举行绑定scroll事宜
- 容器举行转动的过程当中推断是不是间隔顶部小于指定数值，假如小于则触发自定义事宜loadmore
- 营业代码中监听loadmore事宜，假如触发则加载数据
由于代码不庞杂，故不细致剖析，人人看下代码解释，若有不清楚的请在批评中宣布批评：
<script>
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)
}
}
</script>别的该组件中援用到了loading小菊花组件，附录一个小菊花组件代码，因代码简朴故不细致剖析：
菊花运用的是一张gif图片，请照一张你喜好的菊花gif放在该菊花组件的途径下
<template>
<div class="r-loading-container">
<img src="./loading.gif">
</div>
</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>
<div class="index">
<r-scroll ref="scroll" @loadmore="queryDate">
<div class="item" v-for="(item, index) in list">{{item}}</div>
</r-scroll>
</div>
</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>
