Vant瀑布流延迟加载的应用

延迟加载

瀑布流上拉加载新的数据时,给予一定的延迟效果,让数据的加载不要太快(不要感觉很着急的样子),提高用户体验。

可以创建延迟器,实现延迟加载的效果。

示例代码

// 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 // '加载中。。'动画清除
}

效果

在这里插入图片描述

注意

  1. 普通的定时器window.setTimeout()也可以设置延迟器效果,但是代码复杂,开发、维护不方便,不推荐使用。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 我行我“速” 设计师:Amelia_0503 返回首页