更新记录

0.0.1（2025-06-27） 下载此版本

第一次 relase

平台兼容性

uni-app(4.03)

uni-app x(4.03)

其他

vue3-video-swiper

Vue3 视频图片轮播组件, 支持 H5, App, 小程序

工作原理

• 通过 VideoMask 组件覆盖在 swiper 容器上实现视频播放功能
• 监听 touch 事件来处理左右滑动切换,实现类似原生 swiper 的交互效果

使用方法

• 下在代码复制到 srcxcompoents 目录下

• 在 pages.json 文件中修改需要使用该组建大页面, 示例如下:

{
  "pages": [
  {
    "path": "pages/home",
    "style": {
      "navigationStyle": "custom",
      "app-plus": {
        "subNVues": [{
          "id": "videoMask",
          "path": "components/vue3-video-swiper/subnvue/vue3-video-mask",
          "style": {
            "position": "absolute",
            "background": "transparent"
          }
        }]
      },
      "enablePullDownRefresh": false
    }
  },
  // ...
}

• 然后在对页面使用, 示例如下:

<script setup lang="ts">
import VideoSwiper from '@/components/vue3-video-swiper/vue3-video-swiper.vue'

const banners = [
  { id: 1, url: 'xxx', isVideo: true, }
  { id: 2, url: 'xxx', isVideo: false, }
]
</script>
<template>
  <VideoSwiper
    v-else
    :list="banners"
    :height="bannerHeight"
    class="w-full h-full"
  />
</template>

Component Props

list 数据结构

interface ListItem {
  id?: number | string // 项目ID（可选）
  url: string // 资源地址（图片或视频URL）
  isVideo: boolean // 是否为视频文件
}

Component Events

数据格式示例

const bannerList = [
  {
    id: 1,
    url: 'https://example.com/video.mp4',
    isVideo: true,
  },
  {
    id: 2,
    url: 'https://example.com/image.jpg',
    isVideo: false,
  },
  {
    id: 3,
    url: 'https://example.com/another-video.mp4',
    isVideo: true,
  },
]