在普通html文件中:
首先我们写一个DIV 创建一个class。如下
<style>
.wrapper{
//设置一个固定的高 和背景颜色
height:200px;
background-color: sandybrown;
}
</style>
<div class="wrapper"> <ul>
<li>{个表格¥}*100</li>
</ul> </div>
假设我们引入了better-scroll框架 ========》 <script src='./bscroll.js'></script>
然后我们就可以在<script>中去使用better-scroll了
给下面的代码做一些小解释:
1.BScroll 是better-scroll中声明的所以我们引用过better-scroll之后可以直接new出来
2.new 出来的BScroll中可以传2个参数(el,position);第一个是el 第二个是position,个人理解,第一个是dom节点,第二个是一个对象,跟位置有关的属性写进去
3.第二个参数是一个对象,我们给它写进去一个 probeType的属性, probeType : 侦测的意思
4.probeType 有4个值, 分别是 0,1,2 ,3 其中0,1代表了不进行侦测,2和3代表了侦测,
当probeType:2时,在手指滚动的过程中侦测,手指离开后的惯性滚动过程中不侦测
当probeType:3时,只要是滚动都进行侦测
5.需要设置click:true ,这个属性默认为false, 如果为false无法监听.wrapper中的点击事件;不会将事件派发出去,为true时才会派发出去
6.监听上拉加载更多: pullUpLoad :true,如果只写这个属性,就只能加载一次,
7.想要多次实现上拉加载更多,需要再加载完成后,调用BScroll对象的finishPullUp()方法
<script>
const bscroll = new BScroll(document.querySelector('.wrapper'),{
probeType: 3,
click:true
})
bscroll.on('scroll',(position)=>{
console.log(position)
}) </script>