vue实现视频列表
Vue 实现视频列表
基础结构搭建
使用 Vue CLI 或 Vite 创建项目，安装基础依赖。视频列表通常需要以下核心组件：
- 视频卡片组件（显示封面、标题等信息）
- 列表容器（管理布局和数据循环）
- 状态管理（可选，如 Pinia/Vuex 处理分页数据）
<!-- VideoList.vue 示例 -->
<template>
<div class="video-grid">
<VideoCard
v-for="video in videos"
:key="video.id"
:cover="video.cover"
:title="video.title"
@click="playVideo(video.id)"
/>
</div>
</template>数据获取方式
本地静态数据
直接定义数组数据适用于演示或小型项目：
data() {
return {
videos: [
{ id: 1, title: '视频1', cover: '/covers/1.jpg', url: 'video1.mp4' },
{ id: 2, title: '视频2', cover: '/covers/2.jpg', url: 'video2.mp4' }
]
}
}API 动态获取
通过 axios 等库从后端接口获取：
async created() {
try {
const res = await axios.get('/api/videos');
this.videos = res.data;
} catch (error) {
console.error('获取视频列表失败', error);
}
}视频卡片组件
创建可复用的 VideoCard.vue 组件：
<template>
<div class="video-card" @click="$emit('click')">
<img :src="cover" :alt="title" class="cover">
<h3 class="title">{{ title }}</h3>
<!-- 可添加播放按钮/时长等元素 -->
</div>
</template>
<script>
export default {
props: ['cover', 'title']
}
</script>
<style scoped>
.video-card {
cursor: pointer;
transition: transform 0.2s;
}
.video-card:hover {
transform: scale(1.03);
}
.cover {
width: 100%;
border-radius: 8px;
}
</style>分页加载实现
滚动加载
监听滚动事件，到达底部时加载下一页：
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
this.loadMore();
}
});
methods: {
async loadMore() {
if (this.loading || !this.hasNextPage) return;
this.loading = true;
const res = await axios.get(`/api/videos?page=${this.currentPage + 1}`);
this.videos.push(...res.data.list);
this.currentPage++;
this.loading = false;
}
}分页器组件
使用 UI 库（如 Element UI 的分页组件）或自定义分页器：
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
:total="total"
@current-change="handlePageChange"
/>性能优化建议
- 使用
v-lazy指令延迟加载非可视区域的视频封面 - 对长列表采用虚拟滚动（如 vue-virtual-scroller）
- 视频封面使用 CDN 加速和 WebP 格式
- 分页请求添加防抖处理
完整示例代码结构
src/
├── components/
│ ├── VideoCard.vue
│ └── Pagination.vue
├── views/
│ └── VideoList.vue
├── api/
│ └── video.js (封装API请求)
