什么是 better-scroll
better-scroll 是一個(gè)移動端滾動的解決方案，它是基于 iscroll 的重寫爆惧，它和 iscroll 的主要區(qū)別在這里浓冒。better-scroll 也很強(qiáng)大侄旬，不僅可以做普通的滾動列表蚌本，還可以做輪播圖、picker 等等羞芍。
文檔地址
定義組件
//scrollView.vue
<template>
<div ref="wrapper"
class="scrollView">
<slot></slot>
<!--分發(fā)內(nèi)容-->
</div>
</template>
<script type="text/ecmascript-6">
import BScroll from 'better-scroll';//引入better-scroll
//詳細(xì)參數(shù)可以了解better-scroll的文檔
export default {
name: 'scrollView',
props: {
/**
* 1 滾動的時(shí)候會派發(fā)scroll事件哗戈，會截流。
* 2 滾動的時(shí)候?qū)崟r(shí)派發(fā)scroll事件荷科，不會截流唯咬。
* 3 除了實(shí)時(shí)派發(fā)scroll事件，在swipe的情況下仍然能實(shí)時(shí)派發(fā)scroll事件
*/
probeType: {
type: Number,
default: 1
},
/**
* 點(diǎn)擊列表是否派發(fā)click事件
*/
click: {
type: Boolean,
default: true
},
/**
* 是否開啟橫向滾動
*/
scrollX: {
type: Boolean,
default: false
},
/**
* 是否派發(fā)滾動事件
*/
listenScroll: {
type: Boolean,
default: false
},
/**
* 列表的數(shù)據(jù)
*/
data: {
type: Array,
default: null
},
/**
* 是否派發(fā)滾動到底部的事件畏浆，用于上拉加載
*/
pullup: {
type: Boolean,
default: false
},
/**
* 是否派發(fā)頂部下拉的事件胆胰，用于下拉刷新
*/
pulldown: {
type: Boolean,
default: false
},
/**
* 是否派發(fā)列表滾動開始的事件
*/
beforeScroll: {
type: Boolean,
default: false
},
/**
* 當(dāng)數(shù)據(jù)更新后，刷新scroll的延時(shí)刻获。
*/
refreshDelay: {
type: Number,
default: 20
}
},
mounted () {
// 保證在DOM渲染完畢后初始化better-scroll
setTimeout(() => {
this._initScroll()
}, 20)
},
methods: {
_initScroll () {
if (!this.$refs.wrapper) {
return
}
// better-scroll的初始化
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click,
scrollX: this.scrollX,
})
// 是否派發(fā)滾動事件
if (this.listenScroll) {
this.scroll.on('scroll', (pos) => {
this.$emit('scroll', pos)
})
}
// 是否派發(fā)滾動到底部事件蜀涨，用于上拉加載
if (this.pullup) {
this.scroll.on('scrollEnd', () => {
// 滾動到底部
if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
this.$emit('scrollToEnd')
}
})
}
// 是否派發(fā)頂部下拉事件，用于下拉刷新
if (this.pulldown) {
this.scroll.on('touchEnd', (pos) => {
// 下拉動作
console.log(pos);
if (pos.y >= 50) {
this.$emit('pulldown')
}
})
}
// 是否派發(fā)列表滾動開始的事件
if (this.beforeScroll) {
this.scroll.on('beforeScrollStart', () => {
this.$emit('beforeScroll')
})
}
},
disable () {
// 代理better-scroll的disable方法
this.scroll && this.scroll.disable()
},
enable () {
// 代理better-scroll的enable方法
this.scroll && this.scroll.enable()
},
refresh () {
// 代理better-scroll的refresh方法
this.scroll && this.scroll.refresh()
},
scrollTo () {
// 代理better-scroll的scrollTo方法
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
},
scrollToElement () {
// 代理better-scroll的scrollToElement方法
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
}
},
watch: {
// 監(jiān)聽數(shù)據(jù)的變化蝎毡，延時(shí)refreshDelay時(shí)間后調(diào)用refresh方法重新計(jì)算厚柳，保證滾動效果正常
data () {
setTimeout(() => {
this.refresh()
}, this.refreshDelay)
}
}
}
</script>
<style scoped lang="less" rel="stylesheet/less">
</style>
<style lang="less" scoped>
.scrollView {
height: 100%;
overflow: hidden;
}
</style>
使用
<scroll-view ref="wrapper">
<div class="content">
....
</div>
</div>
</scroll-view>
