Vue Vant应用-数据懒加载

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

目录

数据懒加载

vant list组件

基础用法

懒加载应用

修改为vant组件

设置状态和事件

样式修改

不检查到底

修改层级优先级

分页请求

数据加载完成

记录数据总条数

触发判断

总结

---

数据懒加载

懒加载原理：滑动到底部 再去加载新的内容

vant list组件

基础用法

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

懒加载应用

示例films/nowplaying.vue

修改为vant组件

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

<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中设置加载事件。

示例如下：

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

样式修改

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

<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>

不检查到底

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

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

修改层级优先级

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

分页请求

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

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

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

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

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},

数据加载完成

判断数据是否加载完成

记录数据总条数

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

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

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.filmsthis.total = res.data.data.total})},

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

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

触发判断

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

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

总结

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