Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：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-list
v-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.films
this.total = res.data.data.total
})
},获取所有数据条数后，不再加载
onLoad () {
if (this.datalist.length === this.total) {
this.finished = true
return
}触发判断
切换页面 其他页面出现滚动条后，切回来 会触发到底事件，增加判断
onLoad () {
// 总长度匹配 且 总数据条数不为0
if (this.datalist.length === this.total && this.total !== 0) {
this.finished = true
return
}总结
Vue 渐进式JavaScript 框架 基于Vue2的移动端项目：vant应用-数据懒加载