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** +> 浠g爜鍧楋細 `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