From 43cf01b22df46db9a944fe613be5cde8dd28622b Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期四, 12 六月 2025 19:58:14 +0800
Subject: [PATCH] 刷视频支持图片
---
pages/tabbar/index/home.vue | 125 +++++++++++++++++++++++++++--------------
1 files changed, 83 insertions(+), 42 deletions(-)
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index 56e7996..8444073 100644
--- a/pages/tabbar/index/home.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.8.0