基本用法都在這，用來回憶的
因為要等待配置的css加載完才能生效，所以不能使用created
<template>
<!-- 只對 wrapper下對第一個元素標簽內生效，其他自動忽略，當然也可以不寫 content -->
<div class="wrapper">
<ul class="content">
<li>1</li>
<li>2</li>
......
</ul>
</div>
</template>
<script>
import BetterScroll from 'better-scroll' // 參考，先 npm install better-scroll -S
export default {
created() {
return {
bs: null
}
},
mounted() {
this.bs = new BetterScroll('.wrapper', { // 如果使用默認（前兩條屬性），可以不用賦值，直接 new
movable: true,
zoom: true,
probeType: 3, // 2移動距離（手指離開滑動不算） 3移動加滑動距離
pullUpLoad: true, // 上拉加載更多
})
this.direction()
console.log(this.bs) // 列印一下就知道里面的全部屬性
},
methods: {
direction() {
// 監聽移動距離
this.bs.on('scroll', position => {
console.log(position.y) // 實際呼叫的是 directionY，可用有XY，不寫默認全部
})
// 監聽上拉加載更多
this.bs.on('pullingUp', () => {
console.log('上拉加載更多')
// 第一步：呼叫介面并展示資料
// 第二步：執行以下函式，告訴插件已完成事件，才可以進行下一次下拉事件
this.bs.finishPullUp()
})
}
}
}
</script>
<style lang="less" scope>
.wrapper {
height: 200px;
background-color: pink;
overflow: auto;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/252147.html
標籤：其他