延迟加载
瀑布流上拉加载新的数据时,给予一定的延迟效果,让数据的加载不要太快(不要感觉很着急的样子),提高用户体验。
可以创建延迟器,实现延迟加载的效果。
示例代码
:
// main.js文件
// 创建一个延迟器,
// 给Vue增加继承成员,名称$sleep,也可以自定义为其他
Vue.prototype.$sleep = time => {
// 返回一个Promise对象,应用端可以设置async/await使得异步变为同步,
// 同步可以使得后续代码都按照先后顺序执行
return new Promise((resolve) => {
// 定时器,规定在多久之后做一点事情,可以设定当前的延迟器等待时间
window.setTimeout(() => {
// 该resolve()没有任何实质数据,应用端也不用接受
resolve()
}, time)
})
}
$sleep
中有Promise的好处是,可以通过 async / await 控制异步请求为同步请求 , setTimeout可以设置等待执行时间。
延迟加载应用
:
// 瀑布流加载执行的方法
async onLoad () {
// 应用延迟器,使得执行速度减慢
// await设置,作用就是当前的延迟器没有执行完毕,后续代码都等着,即异步调用变为同步执行
await this.$sleep(800) // 该延迟器要等待执行0.8秒
// 1. 获得文章列表数据
// 注意:设置await,使得当前的axios异步进程变为同步的,先执行完,再执行后续代码
const articles = await this.getArticleList()
if (articles.results.length > 0) {
// 2. 把获得到的文章数据push追加给articleList成员
// articles.results: 文章的数组对象集 [{art_id,title,aut_id,pubdate},{……},{……}]
// ...articles.results:扩展运算 {art_id,title,aut_id,pubdate},{……},{……}
this.articleList.push(...articles.results)
// 更新时间戳
this.ts = articles.pre_timestamp // 使得继续请求,可以获得下页数据
} else {
// 4. 数据已经耗尽,就要停止瀑布
this.finished = true // 停止瀑布流加载
}
// 3. 清除上拉动画效果[加载完成]
this.loading = false // '加载中。。'动画清除
}
效果
:
注意
:
- 普通的定时器window.setTimeout()也可以设置延迟器效果,但是代码复杂,开发、维护不方便,不推荐使用。