uniapp 实现一个页面，瀑布流播放视频

最新推荐文章于 2025-08-29 09:32:59 发布

原创

最新推荐文章于 2025-08-29 09:32:59 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #音视频

本文介绍了使用uni-app实现瀑布流播放视频页面的步骤，包括确定数据来源（接口或本地存储）、利用uni-app组件进行布局、使用组件播放视频、监听列表滚动事件以自动播放可视区域视频，还给出代码示例及相关控制要点。

要实现一个瀑布流播放视频的页面，需要以下步骤：

确定数据来源：确定视频数据的来源，可以是通过接口获取或者通过本地存储获取。
组件布局：使用uniapp提供的组件可以实现瀑布流布局，例如使用uni-list来进行布局，可以设置grid属性，从而实现类似于瀑布流的效果。
播放视频：使用uni-video组件来播放视频，设置src属性为对应视频的地址即可。
监听列表滚动事件：当滚动列表时，判断当前的视频是否已经出现在可视区域，如果出现则自动播放视频。

下面是代码示例：

<template>
  <view>
    <uni-list :grid="gridConfig" :data-source="videoList" :scroll-top="scrollTop" @scroll="onListScroll">
      <view slot="grid" class="video-item">
        <uni-video :src="item.videoUrl" @play="onVideoPlay(index)" controls></uni-video>
      </view>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoList: [], // 视频列表数据
      gridConfig: { 
        columnNum: 2, // 列数
        border: true, // 是否显示边框
        square: false, // 是否正方形布局
        clickable: true /