什么是 better-scroll?
better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写。better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等。
使用better-scroll解决微信浏览器在ios系统中,页面布局错乱,软键盘弹出导致底部tab上移等问题。
数据动态更新
better-scroll结合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>