From 43cf01b22df46db9a944fe613be5cde8dd28622b Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期四, 12 六月 2025 19:58:14 +0800
Subject: [PATCH] 刷视频支持图片
---
uni_modules/uni-swiper-dot/changelog.md | 12 +
uni_modules/uni-swiper-dot/package.json | 87 ++++++++++
uni_modules/uni-swiper-dot/readme.md | 11 +
uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue | 218 +++++++++++++++++++++++++++
pages/tabbar/index/home.vue | 125 ++++++++++-----
5 files changed, 411 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
diff --git a/uni_modules/uni-swiper-dot/changelog.md b/uni_modules/uni-swiper-dot/changelog.md
new file mode 100644
index 0000000..85cf54d
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/changelog.md
@@ -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锛屽浣曞垱寤簐ue3椤圭洰锛岃瑙� [uni-app 椤圭洰鏀寔 vue3 浠嬬粛](https://ask.dcloud.net.cn/article/37834)
+## 1.0.6锛�2021-05-12锛�
+- 鏂板 绀轰緥鍦板潃
+- 淇 绀轰緥椤圭洰缂哄皯缁勪欢鐨凚ug
+## 1.0.5锛�2021-02-05锛�
+- 璋冩暣涓簎ni_modules鐩綍瑙勮寖
+- 鏂板 clickItem 浜嬩欢锛屾敮鎸佹寚绀虹偣鎺у埗杞挱
+- 鏂板 鏀寔 pc 鍙敤
diff --git a/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue b/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
new file mode 100644
index 0000000..e66b6c7
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue
@@ -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 {}
+ }
+ },
+ // 绫诲瀷 锛歞efault(榛樿) 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>
diff --git a/uni_modules/uni-swiper-dot/package.json b/uni_modules/uni-swiper-dot/package.json
new file mode 100644
index 0000000..f2dd8d2
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/package.json
@@ -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"
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/uni_modules/uni-swiper-dot/readme.md b/uni_modules/uni-swiper-dot/readme.md
new file mode 100644
index 0000000..7d397e2
--- /dev/null
+++ b/uni_modules/uni-swiper-dot/readme.md
@@ -0,0 +1,11 @@
+
+
+## SwiperDot 杞挱鍥炬寚绀虹偣
+> **缁勪欢鍚嶏細uni-swiper-dot**
+> 浠ｇ爜鍧楋細 `uSwiperDot`
+
+
+鑷畾涔夎疆鎾浘鎸囩ず鐐�
+
+### [鏌ョ湅鏂囨。](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
+#### 濡備娇鐢ㄨ繃绋嬩腑鏈変换浣曢棶棰橈紝鎴栬�呮偍瀵箄ni-ui鏈変竴浜涘ソ鐨勫缓璁紝娆㈣繋鍔犲叆 uni-ui 浜ゆ祦缇わ細871950839
\ No newline at end of file
--
Gitblit v1.8.0