const bscroll = new Bscroll(el,option);
1.监听滚动
probeType:0/1/2/3 2是手指滚动 3是只要滚动就触发,惯性往上也是
bscroll.on(“scroll”,(position)=> {})
2.上拉加载
pullUpLoad:true
bscroll.on(“pullingUop”,()=> {})
上拉加载更多,获取完数据后,最后要调用finishpullUp() ;
滚动时候如果有图片,图片加载过慢,可能滚动时候有bug,卡顿。
要在图片加载完成<img @load = "imgLoad" />
在load加载完过后调用scroll的refresh(),
重新获取滚动的高度。图片过多的话,为了防止调用refresh()过多,可以使用防抖函数
//防抖 文本框最后输入才会发起请求
//频繁操作,因此需要获取最后一次操作结果用来做事
//汽车打火,还在响,松开了,再打火会重新启动发动机
debounce(func,delay) {
let timer = null ;
return function (...args) {
if(timer) clearTimeout(timer);
timer = setTimeout(() =>{
func.apply(this,args)
//fun.apply (thisArg,[arg1,arg2,arg3,…])
//fun.call (thisArg, arg1,arg2,arg3,…)
},delay)
}
}
//节流 一段时间内只执行一次
//onrize,onscroll等频繁触发的函数,获取滚动的长度,触发操作
throttle(func,delay) {
let timer = null ;
return function (...args) {
if(!timer) {
timer = setTimeout(() =>{
func.apply(this,args)
timer = null;// 释放变量
},delay)
}
}
}
//时间戳版
throttle(func,delay) {
let prievwTime = 0 ;
return function (...args) {
let nowTime = +new Date();
if(nowTime - prievwTime > delay) {
prievwTime = nowTime;
func.apply(this,args)
}
}
}