发表于: 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);
},



返回列表 返回列表
评论

    分享到