Vue Vant应用-数据懒加载

List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

懒加载应用

示例films/nowplaying.vue

修改为vant组件

把原来的ul>li元素更换为vant组件，示例如下：

html 复制代码

<template>
    <div>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data.filmId)">
          <img :src="data.poster" alt="">
                <div class="play_info">
                  <div class="title">{{data.name}}</div>
                  <div class="content">
                    <div :class="data.grade ? '' : 'hidden'">观众评分：<span style="color:red">{{data.grade}}</span></div>
                    <div class="actors">主演：{{data.actors | actorName}}</div>
                    <div>
                      {{data.nation}} | {{data.runtime}}分钟
                    </div>
                  </div>
                </div>
        </van-cell>
      </van-list>
    </div>
</template>

设置状态和事件

在data中设置状态，然后在methods中设置加载事件。

示例如下：

javascript 复制代码

export default {
  data () {
    return {
      datalist: [],
      loading: false,
      finished: false
    }
  },
  ......
  methods: {
    onLoad () {
      console.log('onload')
      this.loading = false
    },

样式修改

需要把原来ul>li改为现在的van-list 和 van-cell。

html 复制代码

<style lang="scss" scoped>
.van-list{
  .van-cell{
    overflow:hidden;
    padding: .833333rem;
    img {
      width: 3.6666667rem;
      height: 5.2222rem;
      float: left;
    }
    .play_info {
      float:left;
      padding-left: 10px;
    }
    .title {
      font-size: 16px;
    }
    .content {
      font-size: 13px;
      color:gray;
      .actors {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 11.6333rem;
      }
    }
  }
}
.hidden {
  visibility: hidden;
}
</style>

不检查到底

需要设置初始化时，不检查是否到底。

html 复制代码

<van-list
      v-model="loading" :finished="finished"
      finished-text="没有更多了" @onload="onLoad"
      :immediate-check="false">

修改层级优先级

发现置顶层级被覆盖，修改FilmsView.vue层级优先级

分页请求

把请求后端代码拿过来，设置初始页码为1，每次触底就增加1，并请求后端接口。

javascript 复制代码

export default {
  data () {
    return {
      datalist: [],
      loading: false,
      finished: false,
      current: 1
    }
  },

在onload函数中进行分页请求；请求回数据，进行合并处理；

三个点展开合并处理；更新完毕，恢复loading状态。

javascript 复制代码

onLoad () {
      console.log('到底了')
      this.current++
      http({
        url: `/api/gateway?cityId=130100&pageNum=${this.current}&pageSize=10&type=1&k=8043159`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then(res => {
        this.datalist = [...this.datalist, ...res.data.data.films]
      })
      this.loading = false
    },

数据加载完成

判断数据是否加载完成

记录数据总条数

在第一次请求时，记录总数据条数

在初次请求后端时，获取总数据条数

javascript 复制代码

mounted () {
    http({
      url: '/api/gateway?cityId=130100&pageNum=1&pageSize=10&type=1&k=8043159',
      headers: {
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res => {
      // console.log(res.data)
      this.datalist = res.data.data.films
      this.total = res.data.data.total
    })
  },

获取所有数据条数后，不再加载

javascript 复制代码

onLoad () {
      if (this.datalist.length === this.total) {
        this.finished = true
        return
      }

触发判断

切换页面其他页面出现滚动条后，切回来会触发到底事件，增加判断

javascript 复制代码

onLoad () {
      // 总长度匹配 且 总数据条数不为0
      if (this.datalist.length === this.total && this.total !== 0) {
        this.finished = true
        return
      }

总结

Vue 渐进式JavaScript 框架基于Vue2的移动端项目：vant应用-数据懒加载