刷视频支持图片

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>