better-scroll 的基本使用
1、去 GitHub 下載 bscroll.js 文件
2、引入 HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./bscroll.js"></script>
</head>
<style>
.wrapper {
height: 200px;
background: skyblue;
overflow: hidden;
}
</style>
<body>
<div>
<div class="wrapper">
<ul>
<li>我是第幾1</li>
、、、、、
<li>我是第幾100</li>
</ul>
</div>
</div>
<script>
// 默認情況下， BScroll 是不可以實時的監聽滾動位置
// probe 偵測
// 0, 1 都是不偵測實時的位置
// 2 ：在手指滾動的過程中偵測，手指離開后的慣性滾動過程不偵測
// 3： 在只要是滾動，都偵測
const bscroll = new BScroll(document.querySelector('.wrapper'), {
probeType: 3,
click: true, // 設為 true 表示可以在的 div 里面 實現點擊事件
pullUpLoad: true // 表示上拉加載更多
})
// 監聽位置
// bscroll.on('scroll', (position) => {
// console.log(position)
// })
// 上拉加載更多
bscroll.on('pullingUp', () => {
console.log('上拉加載更多')
// 發送網絡請求，請求更多的數據
// 等數據請求完畢，並且將新的數據展示出來后
setTimeout(() => {
bscroll.finishPullUp()
}, 2000)
})
</script>
</body>
</html>