基于vue2.6.11 + better-scroll2.4.2 封装的列表上滑加载,下滑刷新,拿来即用 ~~
better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里。better-scroll也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等。
// 安装插件
npm i better-scroll -S
<template>
<div ref="scrollRef">
<div class="scroll-content">
<slot></slot>
<!-- loading component -->
<div>loading - component</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'betterScroll',
props: {
/**
* 1 滚动的时候会派发scroll事件,会截流。
* 2 滚动的时候实时派发scroll事件,不会截流。
* 3 除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件
*/
scrollProbe: {
type: Number,
default: 1
},
openScroll: {
type: Boolean,
default: true
},
openPullUp: {
type: Boolean,
default: false
},
openPullDown: {
type: Boolean,
default: false
},
/**
* 滚动列表数据,用于监听异步加载刷新
*/
scrollDataList: {
type: Array,
default: null
}
},
data () {
return {
scroll: null
}
},
methods: {
initScrollEffect () {
const scrollRef = this.$refs.scrollRef
if (!scrollRef) {
console.warn('未初始化DOM实例')
return false
}
const _bsScroll = this.scroll = new BScroll(scrollRef, {
click: true,
scrollY: true,
probeType: this.scrollProbe
})
if (this.openScroll) {
_bsScroll.on('scroll', (pos) => {
this.$emit('scrollEvents', pos)
})
}
// 是否派发滚动到底部事件,用于上拉加载
if (this.openPullUp) {
_bsScroll.on('scrollEnd', () => {
const { y, maxScrollY } = _bsScroll
if (y <= (maxScrollY + 50)) {
this.$emit('pullUpEvents')
}
})
}
// 是否派发顶部下拉事件,用于下拉刷新
if (this.openPullDown) {
_bsScroll.on('touchEnd', (pos) => {
if (pos.y > 100) {
this.$emit('pullDownEvents')
}
})
}
},
scrollRefresh () {
this.scroll && this.scroll.refresh()
}
},
mounted () {
this.$nextTick(() => {
this.initScrollEffect()
})
},
watch: {
// 动态加载列表,重新计算高度
scrollDataList () {
setTimeout(() => this.scrollRefresh(), 100)
}
},
destroyed () {
if (this.scroll) {
this.scroll.destroy()
}
}
}
</script>