节流函数
-
就像游戏cd一样，一定时间之内执行一次
- 防抖的应用场景，页面窗口滑动
function throttle(func, delay) {
var prev = Date.now();
return function () {
var context = this;
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 2000));
防抖函数
- 原理：两张图片请求下来的间隔不超过所设置的
delay，那就会合并到一起进行请求，将非常频繁的请求次数合并成一次请求的操作叫做节流操作
mounted() {
//监听图片加载完成
const refresh = this.debounce(this.$refs.scroll.HeightRefresh,50);
this.$bus.$on('itemImgLoad',() => {
refresh()
})
},
methods: {
debounce(fun,delay) {
let timer = null;
return function(...args){
if(timer) clearTimeout(timer)
timer = setTimeout(() => {
fun.apply(this,args)
},delay)
}
}
}
better-scroll使用方法
content下面只能包括一个元素，content需要固定屏幕的宽高，否则会出现滑动超出。
- 默认情况下BScroll是不可以实时的监听滚动位置
- probe 侦测
- probeType参数
0,1：都是不侦测实时的位置
2: 在手指滚动的过程中侦测, 手指离开后的惯性滚动过程中不侦测.
3: 只要是滚动, 都侦测. - click属性值，默认是false，但是在默认请况下button按钮时可以点击的
const bscroll = new BScroll(document.querySelector('.content'), {
probeType: 3,
click: true,
pullUpLoad: true
})
bscroll.on('scroll', (position) => {
console.log(position);
})
bscroll.on('pullingUp', () => {
console.log('上拉加载更多');
// 发送网络请求, 请求更多页的数据
// 等数据请求完成, 并且将新的数据展示出来后
//下一次上拉加载更多
setTimeout(() => {
bscroll.finishPullUp()
}, 2000)
})
document.querySelector('.btn').addEventListener('click', function () {
console.log('------');
better-scroll的弊端
在异步请求之后的图片会无法拉取，原因是，在未加载完之前能拉取的高度已经确定了，在新加载之后的图片之后，能拉取的高度并没有更新，需要我们手动更新
- 在数据加载完之后调用实例化对象的
refresh()方法
scroll.refresh();
*在keep-alive保存状态之后，返回到原来的组件还是没有保存原来的状态，其原因是出在better-scroll内部，解决方法
组件有两个生命周期
activated 和 deactivated,通过在函数里面保存离开之前的位置，在回来之后设置成原来的位置就行啦
