use better-scroll in vue
<scroll class="scroll" @nextPage="nextPage">
<ul class="list">
<li class="list-item" v-for="(n,index) in reChargeList" :key="index">...</li>
<div class="more-btn" @click="nextPage">--- {{checkMore}} ---</div>
</ul>
</scroll>now the problem is that after the pull-up load, the load is successful, but the page can"t be pulled down. Why?
<template>
<div ref="wrapper">
<slot></slot>
</div>
</template>
<script>
import BScroll from "better-scroll"
export default {
props: {
probeType: {
type: Number,
default: 3
},
click: {
type: Boolean,
default: true
},
listenScroll: {
type: Boolean,
default: false
},
data: {
type: Array | Object,
default: null
},
pullup: {
type: Boolean,
default: true
},
pullUpLoad: {
type: Boolean,
default: true
},
beforeScroll: {
type: Boolean,
default: false
},
refreshDelay: {
type: Number,
default: 20
}
},
mounted () {
setTimeout(() => {
this._initScroll()
}, 20)
},
methods: {
_initScroll () {
if (!this.$refs.wrapper) {
return
}
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click
})
if (this.listenScroll) {
let me = this
this.scroll.on("scroll", pos => {
me.$emit("scroll", pos)
})
}
if (this.pullup) { // ,,
this.scroll.on("touchEnd", (pos) => {
console.log(pos.y)
if (pos.y < 50) {
this.$emit("nextPage")
}
})
// this.scroll.on("scrollEnd", () => { // ,
// console.log(this.scroll.y, this.scroll.maxScrollY + 50)
// if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
// this.$emit("nextPage")
// }
// })
}
if (this.beforeScroll) {
this.scroll.on("beforeScrollStart", () => {
this.$emit("beforeScroll")
})
}
},
disable () {
this.scroll && this.scroll.disable()
},
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: {
data () {
setTimeout(() => {
this.refresh()
}, this.refreshDelay)
}
}
}
</script>