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()也可以设置延迟器效果，但是代码复杂，开发、维护不方便，不推荐使用。