[TOC]

创建 src/components/CourseContentList.vue

//CourseContentList.vue <template> <div class=“course-content-list”></div> </template> <script> export default { name:‘CourseContentList’ } </script> <style lang=“scss” scoped></style>

引⼊到 CourseContent.vue 中

… <course-content-list ></course-content-list>

功能采⽤ Vant 的 List 列表组件

设置到⻚⾯中 load 事件：⽤于进⾏数据请求 list 组件初始化后会触发⼀次 load 事件，⽤于加载⾸屏的数据。 如果⼀次请求加载的数据较少，列表内容⽆法铺满屏幕，会⾃动再次触发 load，直到内容铺 满屏幕或加载全部数据。 滑动列表触底时也会触发 load loading：控制（触底后）新数据是否加载 未加载时 loading 为 false，当 load 事件触发，loading ⾃动变更为 true，显示加载状态提示， 且请求过程中⽆法再次触发 load 事件。请求完毕设置 loading 为 false 取消加载提示即可。 finished： 在每次请求完毕后，需要⼿动将 loading 设置为 false，表示本次加载结束 所有数据加载结束，finished 为 true，此时不会触发 load 事件 // CourseContentList.vue