爲了方便在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>