What is better-scroll?
better-scroll is a moving scroll end solution, which is based on the rewritable iscroll. better-scroll is also very powerful, not only do ordinary scroll through the list, you can also do the carousel map, picker, and so on.
The use of better-scroll solve the micro-channel browser ios systems, page layout confusion, resulting in soft keyboard pops up on the bottom tab shift and other issues.
Dynamic data update
to achieve better-scroll binding vue
<template>
<div class="wrapper" ref="wrapper">
<ul class="content">
<li v-for="item in data">{{item}}</li>
</ul>
<div class="loading-wrapper"></div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
data() {
return {
data: []
}
},
created() {
this.loadData()
},
methods: {
loadData() {
requestData().then((res) => {
this.data = res.data.concat(this.data)
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new Bscroll(this.$refs.wrapper, {})
this.scroll.on('touchend', (pos) => {
// 下拉动作
if (pos.y > 50) {
this.loadData()
}
})
} else {
this.scroll.refresh()
}
})
})
}
}
}
</script>