list列表经常会用在循环数据输出时，这绝对是一个出境率很高的组件。这个组件封装了load事件等常用的功能。学会list列表组件，对我们的项目开发起到事半功倍的效果。
准备工作：
- 创建一个页面: List.vue
- 在router.js里配置Cell页面的路由
{
path: '/list',
name: 'list',
component: () => import('./views/List.vue')
}
- 在index.vue里添加一项
<a href="javascript:void(0)" @click="$router.push('/list')">
<van-col span="6" class="marb20">
<van-icon name="records" />
<div>List列表</div>
</van-col>
</a>
至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了4个组件了！
代码演示List列表：
我们项目开发中不可避免地要进行列表地循环输出。这节课我们将结合上节课利用mock.js创建出来的JSON数据进行list列表地输出。这个列表每页显示20条数据，拉到底部时再加载20条数据，直至加载完毕。
1.List列表标签上的属性和EVENT：
在DOM里是如下的显示方式的
<van-list style="text-align: left" v-model="loading" :finished="finished" @load="onLoad" > <van-cell v-for="item in articles" :key="item.title" :title="item.title" :value="item.date" /> </van-list>
loading: 是否处于加载状态的变量，其值是布尔值。当鼠标滑到底部时，会触发load事件，并将loading设置为true；
finished：是否加载完毕；
load:滚动条与底部距离小于offset时会触发;
slot: 自定义加载提示的样式。
说明：
1.是否触发load事件，取决于两个变量: 当loading="true" && finished="false"时才会加载。起决定性作用的是finished， finished="true"时则结束加载事件的调用。
2.改变默认的“加载提示”样式，要将v-model="loading"去掉，再加上<slot name="loading">加载耶</slot>。这样才可以将原有的样式剔除，只留下自定义的加载提示样式。
2.定义data里的数据变量：
data() {
return {
articles: [],
loading: false,
finished: false,
curPage: 1
}
},
articles：加载的数据列表。为了有那种加载分页的效果，我们先存入20条数据，再存入20条数据...直到数据完全加载完毕。
curPage：当前的页数。这是我们自己设置的，模拟一下分页效果。如果在真实项目中，当前页数是从后台调出来的数据。
3.构造函数分析：
为了有那种加载分页的效果，利用setTimeout异步更新数据。
首先们来看下需要哪些数据：
allData：总数据的条数；
perContent：每页显示的条数；
allPage：总共有多少页，我们这里使用总条数/每页显示的条数；（真实项目中可以从后台调出）
curContent：每次调用load时，当前页的数据。当前页显示的数据分两种情况：
1.当前页是否为最后一页，如果非最后一页，则我们得到的当前数据为：
curContent = res.data.articles.slice(this.articles.length, this.curPage*perContent)
2.如果当前页是最后一页，则我们得到的当前数据为：
curContent = res.data.articles.slice(this.articles.length)
请求的数据是上节课利用mock.js创建出来的数据，利用ajax请求
this.$axios.post('/news/api')
利用slice()来截取请求的数据，并将当页截取的数据推送到加载的数组articles中。
4.构造函数完整的代码为：
onLoad() {
setTimeout(() => { //异步数据更新
let perContent = 20 //每页显示的数据
this.$axios.post('/news/api') //调用数据接口
.then((res) => {
let allData = res.data.articles.length //总数据
let allPage = Math.ceil(allData / perContent) //总页数
let curContent = [] //当前页数据，每次调用先清空数据
if(this.curPage === allPage) { //判断当前页是否最后一页，数据赋值有所不同
curContent = res.data.articles.slice(this.articles.length)
} else {
curContent = res.data.articles.slice(this.articles.length, this.curPage*perContent)
}
this.articles.push(...curContent)
console.log(this.articles)
this.loading = false
this.curPage ++
if(this.curPage > allPage) { //判断是否是最后一页，如果是最后一页，将finished设置为true，即例到底部也将不再加载数据。
this.finished = true
}
})
.catch((err) => {
console.log(err)
})
}, 500);
},
我们可以看到浏览器里，当我们滚动条滚动到底时会出现“加载中”中的字样，然后接下来的20条数据加载出来，依此往复直到所有数据加载完毕。
这就是List列表组件的一个展示，希望对大家有用。
今天就到这里了，我们休息，休息一会儿吧！明天继续加油噢！加油