[外门弟子]JS-1|2020年07月09日的日报-技能树.IT修真院

发表于： 2020-07-09 09:12:08

1 2537

今天完成的事情：

1.懒加载插件，如何懒加载图片（已完成）

2.节流函数，配合监听滚动条，实现减少回调函数的调用（已完成）

3.防抖函数，配合v-model双向绑定，实现等停止输入之后一定时间进行正则验证（已完成）

4.async和await（了解了）

5.模版字符串（了解了）

6.扩展运算符（了解了）

7.上拉加载更多demo 利用vant的list（已完成）

8.下拉刷新demo，利用vant的pullrefresh（已完成）

1.懒加载使用的lazyLoad插件，比如要懒加载一个图片

2.节流函数

节流函数的目的在于防止高频次的调用一些函数，造成性能的浪费，主要是看函数的调用有没有超过一定的时间间隔，如果超过了间隔则调用函数

r//节流函数
function throttle(fun , time) {
let startTime = 0
return (...args) => {
let timeNow = +new Date()
if(timeNow - startTime >= time) {
fun(...args)
startTime = timeNow
}
}
}
window.addEventListener('scroll' , throttle(this.getVideoTop , 50))

3.防抖函数，同样也是防止高频次调用函数的一种方法，比如输入keyup事件，输入的时候会一直调用这个事件，如果监听了函数则会一直调用，我们希望等我们停止输入一定事件之后再调用函数。demo如下

4-6只是作为一个新知识了解，但是没有专门去做demo。

7.利用vant的上拉加载更多，demo如下：

<van-list 
v-model="loading" 
@load="onload" 
:finished="finished"
finished-text="没有更多了">
<van-cell v-for="item in list" :key="item" :title="item"/>
</van-list>

onload() {
console.log('执行加载操作')
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}

// 加载状态结束
this.loading = false;

// 数据全部加载完成
if (this.list.length >= 40) {
this.finished = true;
}
}, 2000);
}

8.利用的是vant的下拉刷新demo如下：

<van-pull-refresh v-model="isloading" @refresh='onRefresh' success-text="刷新成功">

</van-pull-refresh>

onRefresh() {
setTimeout(() => {
console.log('执行了刷新操作')
this.isloading = false
}, 500);
},

返回列表

【任务6】 [外门弟子]JS-1 | 2020年07月09日 的日报 中品

评论

分享到

【任务6】 [外门弟子]JS-1 | 2020年07月09日的日报中品