刷视频支持图片

xiangpei

2025-06-12 43cf01b22df46db9a944fe613be5cde8dd28622b

 pages/tabbar/index/home.vue

@@ -9,6 +9,7 @@
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in videoList" :key="item.id">
      <view style="width: 100%;height: 100%;" v-if="item.videoContentType === 'video'">
      <!-- 播放按钮（仅当视频暂停时显示） -->
      <view 
        class="play-icon" 
@@ -55,6 +56,30 @@
           </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>