<div class="container">
<ul class="list">
<li
v-for="(item,index) in list"
:key="index"
class="list-item">
{{item}}
</li>
</ul>
</div>
<button @click="up">up</button>
<button @click="dowm">dowm</button>
</template>
<script setup>
// 导入vue3的api
import { onMounted,ref,nextTick } from 'vue'
// 导入better-scroll组件
import Bscroll from 'better-scroll'
// 声明变量
const list = ref([])
// 声明better-scroll的初始化对象
const btS = ref(null)
// 用一个异步来模拟初始化数据
const initList = ()=>{
return new Promise((resolve)=>{
setTimeout(()=>{
for(let i = 0; i < 100;i++){
list.value.push(i)
}
resolve()
},3000)
})
}
// 调用better-scroll的实例化对象btS的api来控制
const up = () => {
if(btS.value.y == 0){
return console.log(btS.value.y)
}
btS.value.scrollBy(0,50,300)
}
const dowm = () => {
btS.value.scrollBy(0,-50,300)
}
onMounted( ()=>{
initList().then(async ()=>{
// 在数据初始化之后，更新完dom之后才能初始化btScroll
await nextTick()
// 传入list的父容器.container,初始化对象用btS来接收
btS.value = new Bscroll('.container')
})
})
</script>
<style lang="less" scoped>
// list的父容器必须要有固定的宽高，并且overflow要是hidden
.container{
height: 500px;
overflow: hidden;
}
</style>
要点：
1.必须给list一个父容器，并且这个父容器的宽高要固定，overflow要是hidden
2.要等数据初始化之后，等list有一个固定宽高之后才能够初始化better-scroll
3.初始化better-scroll传入的dom参数是list的父容器
