刷视频支持图片

xiangpei

2025-06-12 43cf01b22df46db9a944fe613be5cde8dd28622b

刷视频支持图片

 pages/tabbar/index/home.vue

@@ -9,52 +9,77 @@
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in videoList" :key="item.id">
        <!-- 播放按钮（仅当视频暂停时显示） -->
        <view 
          class="play-icon" 
          @click="togglePlay(index)"
          v-if="!currentVideoIsPlaying"
        >
          <image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
        </view>
        <video 
          :id="'video'+index"
          :ref="'video'+index"
          :src="item.videoUrl"
          :autoplay="currentIndex === index"
          :controls="false"
          :loop="true"
          :object-fit="item.objectFit"
          :enable-progress-gesture="false"
          class="video-item"
          @play="onPlay(item.id, index)"
          @pause="onPause(index)"
          @ended="onEnded(index)"
          @click="togglePlay(index)"
          @timeupdate="onTimeUpdate($event)"
          @loadedmetadata="onLoadedMetadata($event)"
		  
        ></video>
        <!-- 自定义控制条 -->
        <view 
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
            class="container">
          <!-- 进度条 - 整个区域可拖动 -->
          <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
              <!-- 显示当前进度 -->
              <view class="progress-text">{{ hasPlayTime }}/{{formartDuration}}</view>
        <view style="width: 100%;height: 100%;" v-if="item.videoContentType === 'video'">
              <!-- 播放按钮（仅当视频暂停时显示） -->
              <view 
                class="progress-bar" 
                id="progressBar"
                class="play-icon" 
                @click="togglePlay(index)"
                v-if="!currentVideoIsPlaying"
              >
			  			  
                <!-- 已填充部分 -->
                <view class="progress-fill" :style="{ width: progress + '%' }"></view>
                <image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
              </view>
          </view>
              <video
                :id="'video'+index"
                :ref="'video'+index"
                :src="item.videoUrl"
                :autoplay="currentIndex === index"
                :controls="false"
                :loop="true"
                :object-fit="item.objectFit"
                :enable-progress-gesture="false"
                class="video-item"
                @play="onPlay(item.id, index)"
                @pause="onPause(index)"
                @ended="onEnded(index)"
                @click="togglePlay(index)"
                @timeupdate="onTimeUpdate($event)"
                @loadedmetadata="onLoadedMetadata($event)"
				
              ></video>
              <!-- 自定义控制条 -->
              <view 
                @touchstart="handleTouchStart"
                @touchmove="handleTouchMove"
                @touchend="handleTouchEnd"
                class="container">
                <!-- 进度条 - 整个区域可拖动 -->
                <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
                  <!-- 显示当前进度 -->
                  <view class="progress-text">{{ hasPlayTime }}/{{formartDuration}}</view>
                  <view 
                    class="progress-bar" 
                    id="progressBar"
                  >
							  
                    <!-- 已填充部分 -->
                    <view class="progress-fill" :style="{ width: progress + '%' }"></view>
                  </view>
                </view>
              </view>
        </view>
        <view style="width: 100%; height: 100%;" v-else-if="item.videoContentType === 'img'">
          <uni-swiper-dot 
            :info="item.imgs" 
            :current="currentImgIndex" 
            mode="round" 
            style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;"
            :dots-styles="{width: 24, bottom: 24,selectedBackgroundColor: 'green', backgroundColor: 'gray'}"
            >
            <swiper class="swiper-box" @change="imgChange" :autoplay="true" :interval="3000">
              <swiper-item v-for="img in item.imgs" :key="img">
                <view class="swiper-item">
                  <!-- 调整 image 样式，使其居中且按比例缩放 -->
                  <image 
                    :src="img" 
                    mode="aspectFit" 
                    style="width: 100%; height: 100%; display: block; margin: 0 auto;"
                  ></image>
                </view>
              </swiper-item>
            </swiper>
          </uni-swiper-dot>
        </view>
		
        
        <!-- 悬挂商品链接层 -->
        <view class="goods-link-warp">
@@ -211,6 +236,7 @@
  },
  data() {
    return {
        currentImgIndex: 0, // 播放到第几张图--索引
        currentTime: 0,
        formartDuration: '',
        duration: 0,
@@ -294,6 +320,10 @@
    this.initVideoContexts();
  },
  methods: {
      // 轮播图变化
      imgChange(e) {
          this.currentImgIndex = e.detail.current;
      },
      // 获取进度条的位置和尺寸
      getBarRect() {
        const query = uni.createSelectorQuery().in(this);
@@ -1164,4 +1194,15 @@
      font-size: 14px;
      color: #666;
    }
    .swiper-box {
      width: 100%;
      height: 1400rpx;
    }
    .swiper-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
</style>

 uni_modules/uni-swiper-dot/changelog.md

New file
@@ -0,0 +1,12 @@
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swiper-dot](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.6（2021-05-12）
- 新增 示例地址
- 修复 示例项目缺少组件的Bug
## 1.0.5（2021-02-05）
- 调整为uni_modules目录规范
- 新增 clickItem 事件，支持指示点控制轮播
- 新增 支持 pc 可用

 uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue

New file
@@ -0,0 +1,218 @@
<template>
    <view class="uni-swiper__warp">
        <slot />
        <view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
            <view v-for="(item,index) in info" @click="clickItem(index)" :style="{
        'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/2 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
             :key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
        </view>
        <view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
            <view v-for="(item,index) in info" @click="clickItem(index)" :style="{
        'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
             :key="index" class="uni-swiper__dots-item" />
        </view>
        <view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
            <view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
            'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
             :key="index" class="uni-swiper__dots-item " />
        </view>
        <view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
            <text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
        </view>
        <view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
            <view v-for="(item,index) in info" @click="clickItem(index)" :style="{
        'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
             :key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
        </view>
    </view>
</template>

<script>

    /**
     * SwiperDod 轮播图指示点
     * @description 自定义轮播图指示点
     * @tutorial https://ext.dcloud.net.cn/plugin?id=284
     * @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
     * @property {String} mode = [default|round|nav|indexes] 指示点的类型
     *     @value defualt 默认指示点
     *     @value round 圆形指示点
     *     @value nav 条形指示点
     *     @value indexes 索引指示点
     * @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填）
     * @property {String} info 轮播图的数据，通过数组长度决定指示点个数
     * @property {Object} dotsStyles 指示点样式
     * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
     */

    export default {
        name: 'UniSwiperDot',
        emits:['clickItem'],
        props: {
            info: {
                type: Array,
                default () {
                    return []
                }
            },
            current: {
                type: Number,
                default: 0
            },
            dotsStyles: {
                type: Object,
                default () {
                    return {}
                }
            },
            // 类型 ：default(默认) indexes long nav
            mode: {
                type: String,
                default: 'default'
            },
            // 只在 nav 模式下生效，变量名称
            field: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                dots: {
                    width: 6,
                    height: 6,
                    bottom: 10,
                    color: '#fff',
                    backgroundColor: 'rgba(0, 0, 0, .3)',
                    border: '1px rgba(0, 0, 0, .3) solid',
                    selectedBackgroundColor: '#333',
                    selectedBorder: '1px rgba(0, 0, 0, .9) solid'
                }
            }
        },
        watch: {
            dotsStyles(newVal) {
                this.dots = Object.assign(this.dots, this.dotsStyles)
            },
            mode(newVal) {
                if (newVal === 'indexes') {
                    this.dots.width = 14
                    this.dots.height = 14
                } else {
                    this.dots.width = 6
                    this.dots.height = 6
                }
            }

        },
        created() {
            if (this.mode === 'indexes') {
                this.dots.width = 12
                this.dots.height = 12
            }
            this.dots = Object.assign(this.dots, this.dotsStyles)
        },
        methods: {
            clickItem(index) {
                this.$emit('clickItem', index)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .uni-swiper__warp {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

    .uni-swiper__dots-box {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .uni-swiper__dots-item {
        width: 8px;
        border-radius: 100px;
        margin-left: 6px;
        background-color: rgba(0, 0, 0, 0.4);
        /* #ifndef APP-NVUE */
        cursor: pointer;
        /* #endif */
        /* #ifdef H5 */
        // border-width: 5px 0;
        // border-style: solid;
        // border-color: transparent;
        // background-clip: padding-box;
        /* #endif */
        // transition: width 0.2s linear;  不要取消注释，不然会不能变色
    }

    .uni-swiper__dots-item:first-child {
        margin: 0;
    }

    .uni-swiper__dots-default {
        border-radius: 100px;
    }

    .uni-swiper__dots-long {
        border-radius: 50px;
    }

    .uni-swiper__dots-bar {
        border-radius: 50px;
    }

    .uni-swiper__dots-nav {
        bottom: 0px;
        // height: 26px;
        padding: 8px 0;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .uni-swiper__dots-nav-item {
        /* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
        font-size: 14px;
        color: #fff;
        margin: 0 15px;
    }

    .uni-swiper__dots-indexes {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        // flex: 1;
        justify-content: center;
        align-items: center;
    }

    .uni-swiper__dots-indexes-text {
        color: #fff;
        font-size: 12px;
        line-height: 14px;
    }
</style>

 uni_modules/uni-swiper-dot/package.json

New file
@@ -0,0 +1,87 @@
{
  "id": "uni-swiper-dot",
  "displayName": "uni-swiper-dot 轮播图指示点",
  "version": "1.2.0",
  "description": "自定义轮播图指示点组件",
  "keywords": [
    "uni-ui",
    "uniui",
    "轮播图指示点",
    "dot",
    "swiper"
],
  "repository": "https://github.com/dcloudio/uni-ui",
  "engines": {
    "HBuilderX": ""
  },
  "directories": {
    "example": "../../temps/example_temps"
  },
  "dcloudext": {
    "category": [
      "前端组件",
      "通用组件"
    ],
    "sale": {
      "regular": {
        "price": "0.00"
      },
      "sourcecode": {
        "price": "0.00"
      }
    },
    "contact": {
      "qq": ""
    },
    "declaration": {
      "ads": "无",
      "data": "无",
      "permissions": "无"
    },
    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
  },
  "uni_modules": {
    "dependencies": ["uni-scss"],
    "encrypt": [],
    "platforms": {
      "cloud": {
        "tcb": "y",
        "aliyun": "y"
      },
      "client": {
        "App": {
          "app-vue": "y",
          "app-nvue": "y"
        },
        "H5-mobile": {
          "Safari": "y",
          "Android Browser": "y",
          "微信浏览器(Android)": "y",
          "QQ浏览器(Android)": "y"
        },
        "H5-pc": {
          "Chrome": "y",
          "IE": "y",
          "Edge": "y",
          "Firefox": "y",
          "Safari": "y"
        },
        "小程序": {
          "微信": "y",
          "阿里": "y",
          "百度": "y",
          "字节跳动": "y",
          "QQ": "y"
        },
        "快应用": {
          "华为": "u",
          "联盟": "u"
        },
        "Vue": {
            "vue2": "y",
            "vue3": "y"
        }
      }
    }
  }
}

 uni_modules/uni-swiper-dot/readme.md

New file
@@ -0,0 +1,11 @@


## SwiperDot 轮播图指示点
> **组件名：uni-swiper-dot**
> 代码块： `uSwiperDot`


自定义轮播图指示点

### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839