问题： 列表滚动时实际上是整个 Course 组件都在滚动，这时顶部的导航与轮播也会滚动。 加载完毕后，列表底部的提示内容被 LayoutFooter 的路由按钮功能遮挡。 解决⽅式： 设置列表固定定位 CourseHeader ⾼度 50px 轮播⾼度 170px LayoutFooter ⾼度 50px // CourseContentList.vue … 功能操作正确，说明设置是成功的，但我们要深⼊思考⼀下。 我们的课程列表组件是⼀个独⽴组件功能，应只对⾃身负责。当前操作中设置的 top 与 bottom 实际上是根据⽗组件的布局设置的，如果以后⽗组件布局变化，或其他组件需要使⽤课程列表组件，都需要来修改⼦组件的数据，这是⼗分不合理的。总的来说，CourseContentList 与 CourseContent 耦合。 结论，我们应该将与⽗组件布局相关的 top 与 left 由⽗组件设置，来进⾏解耦。 将 CourseContentList 的 top 与 bottom 修改为 0。 // CourseContentList.vue … 在⽗组件 CourseContent 中设置⼦组件容器的位置即可。 // CourseContent.vue … // 底部课程列表的位置样式，不应该设置在组件内容 .course-content-list { top: 220px; bottom: 50px; }