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>