为了方便在VUE中的使用，可以把better-scroll抽化成一个组件，比如我抽化成了一个scroll组件，如下：
<template>
//ref="wrapper"不能更改
<div ref="wrapper">
//此处放加载异步加载的内容
<slot name="header"></slot>
//此处为上拉后没有数据的时候显示的提示
<div class="footer"><slot name="footer"></slot>
</div>
//此处为下拉刷新后没有数据的时候显示的提示
<slot name="footer2"></slot>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import BScroll from 'better-scroll'
export default {
props: {
/**
* 1 滚动的时候会派发scroll事件，会截流。
* 2 滚动的时候实时派发scroll事件，不会截流。
* 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
*/
probeType: {
type: Number,
default: 1
},
/**
* 点击列表是否派发click事件
*/
click: {
type: Boolean,
default: true
},
/**
* 是否开启横向滚动
*/
scrollX: {
type: Boolean,
default: false
},
/**
* 是否派发滚动事件
*/
listenScroll: {
type: Boolean,
default: false
},
/**
* 列表的数据
*/
data: {
type: Array,
default: null
},
/**
* 是否派发滚动到底部的事件，用于上拉加载
*/
pullup: {
type: Boolean,
default: true
},
/**
* 是否派发顶部下拉的事件，用于下拉刷新
*/
pulldown: {
type: Boolean,
default: false
},
/**
* 是否派发列表滚动开始的事件
*/
beforeScroll: {
type: Boolean,
default: false
},
/**
* 当数据更新后，刷新scroll的延时。
*/
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
})
// 是否派发滚动事件
if (this.listenScroll) {
let me = this
this.scroll.on('scroll', (pos) => {
me.$emit('scroll', pos)
})
}
// 是否派发滚动到底部事件，用于上拉加载
if (this.pullup) {
this.scroll.on('scrollEnd', () => {
// 滚动到底部
if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
this.$emit('scrollToEnd')
}
})
}
// 是否派发顶部下拉事件，用于下拉刷新
if (this.pulldown) {
this.scroll.on('touchend', (pos) => {
// 下拉动作
if (pos.y > 50) {
this.$emit('pulldown')
}
})
}
// 是否派发列表滚动开始的事件
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(){this.scroll &&this.scroll.refresh()},
scrollTo(){this.scroll &&this.scroll.scrollTo.apply(this.scroll, arguments)},
scrollToElement(){this.scroll &&this.scroll.scrollToElement.apply(this.scroll, arguments)}},
watch:{// 监听数据的变化，延时refreshDelay时间后调用refresh方法重新计算，保证滚动效果正常
data(){
setTimeout(()=>{this.refresh()},this.refreshDelay)}
}
}
</script>
<style>
.top{
position:fixed;
top:0;
left:0;
width:100%;
}
.footer{
position:fixed;
bottom:0;
left:0;
width:100%;
}
</style>
好了，组件抽化成功，下面就是在父组件中引入他
<template>
<div class="">
//下面scroll中的属性 :data="soon_auction_ul"是数据数组的盒子 :pulldown="pulldown"是是否开启刷新的开关 @pulldown="loadData" 是在下拉的时候调用loadData（）函数@scrollToEnd="loadData"实在上拉的时候调用loadData（）函数
<scroll class="wrapper" :data="soon_auction_ul" :pulldown="pulldown" @pulldown="loadData" @scrollToEnd="loadData"><ul class="soon_auction_ul content" slot="header">
<li v-for="item in soon_auction_ul">
<div class="soon_auction_ultop">
<div><img src="../assets/img/aboutus.png" alt=""></div>
<div></div>
<div><img src="../assets/img/ico.png" alt=""></div>
</div>
<div><span>{{ item.biaoti }}</span></div>
<div>{{ item.addres }}</div>
</li>
</ul>
<div slot="footer" v-if="shifou" class="nodata">{{ xianshi }}</div>
<div slot="footer2" v-if="shifou2" class="nodata2">{{ xianshi2 }}</div>
</scroll>
</div>
</template>
<script>
import BScroll from 'better-scroll'
import scroll from '../components/scroll'
export default {
components:{
scroll,
},
//created钩子函数时调用一次loadData（）函数作为初始数据显示
created() {this.loadData()
},
data () {
return {
soon_auction_ul:[],
// data: [],
pulldown: true,
num_:0,
xianshi:'已无更多数据',
xianshi2:'加载完成',
shifou:false,
shifou2:false,
}
},
methods:{
},
//loadData（）函数来实现数据加载，可自行实现，我写的是加载的本地数据，可以无视
loadData() {this.$http.get('api/seller2').then((res) => {
let data_length=res.data.data.supports2.length
let index_paimai_1=res.data.data.supports2[this.num_]
this.num_++
if (this.num_>=data_length+1) {
this.shifou=true
setTimeout(()=>{this.shifou=false},1500)
return false
}else{
this.soon_auction_ul.push(index_paimai_1)
this.shifou=false
this.shifou2=true
setTimeout(()=>{this.shifou2=false},2000)
}
// this.soon_auction_ul = res.data.data.supports2.concat(this.soon_auction_ul)
})
}
},
}
</script>
//样式自己实现
<style scoped>
</style>