vue-better-scroll实现上拉刷新
<bscroll class="bd" ref="bscroll" :pullup="true" @scrollToEnd="getMore">
<ul>
<router-link :to="'/detail/'+item.id" tag="li" v-for="(item, index) in list" :key="index">
<h3>{{item.title}}</h3>
<div class="content">
<div class="image">
<img :src="'img/list/'+item.img">
</div>
<div class="text">
<div class="top">{{item.text}}</div>
<div class="bottom">
<span>{{item.num}}浏览</span>
<div v-if="item.imgname" class="person">
<span>{{item.imgname}}</span>
<img :src="'img/list/'+item.icon" alt="">
</div>
<div v-else class="type" :style="item.type=='问答'?'color:#42d6ba;border-color:#42d6ba':'color:#f63c3c;border-color:#f63c3c'">{{item.type}}</div>
</div>
</div>
</div>
</router-link>
<div class="loading" v-if="allList.length">
<img src="img/loading.gif" alt="">
<!-- 正在加载 -->
</div>
</ul>
</bscroll>
：pullup就是支持上拉刷新，scrollToEnd表示上拉刷新执行时要执行的方法
这个封装好的scroll
scroll.vue
<template>
<div ref="scroll">
<slot></slot>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
props: {
probeType: {
type: Number,
default: 1
},
click: {
type: Boolean,
default: true
},
pullup: {
type: Boolean,
default: false
},
pullDown: {
type: Boolean,
default: false
},
data: {
type: Array,
default: null
},
listenScroll: {
type: Boolean,
default: false
},
},
data() {
return {}
},
mounted() {
setTimeout(() => {
this.initScroll();
}, 20)
},
methods: {
initScroll() {
this.scroll = new BScroll(this.$refs.scroll, {
probeType: this.probeType,
click: this.click
})
//如果监听滚动并派发事件 scroll
if (this.listenScroll) {
let that = this
this.scroll.on('scroll', (pos) => {
that.$emit('scroll', pos)
})
}
//上拉加载
if (this.pullup) {
this.scroll.on('scrollEnd', (e) => {
console.log(e)
// console.log(this.scroll.y)
// console.log(this.scroll.maxScrollY)
if (this.scroll.y <= (this.scroll.maxScrollY + 100)) {
this.$emit('scrollToEnd')
}
})
}
//下拉刷新
if (this.pullDown) {
this.scroll.on('scrollEnd', (e) => {
console.log(e)
// console.log(this.scroll.y)
// console.log(this.scroll.maxScrollY)
if (this.scroll.y >= (this.scroll.maxScrollY + 100)) {
this.$emit('scrollToEnd')
}
})
}
},
//重新渲染
refresh() {
this.scroll && this.scroll.refresh()
},
//滚动
scrollToElement() {
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
}
},
watch: {
data() {
setTimeout(() => {
this.refresh()
}, 20)
}
}
}
</script>
<style scoped>
</style>
