From 98ff063085763c6879422ba5dab98fd3a144b54c Mon Sep 17 00:00:00 2001
From: linju <linju@dcloud.io>
Date: Tue, 22 Aug 2023 20:55:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E7=AB=96=E5=88=92=E8=A7=86=E9=A2=91=E4=B8=BA?=
 =?UTF-8?q?=E5=85=A8=E5=B1=8F=20=20=E4=BF=AE=E5=A4=8D=201.=20=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E5=8A=A0=E8=BD=BD=E5=92=8C=E6=92=AD=E6=94=BE=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E5=B1=82=E5=8F=A0=E9=97=AE=E9=A2=98=202.=20=E5=B0=81?=
 =?UTF-8?q?=E9=9D=A2=E4=B8=8D=E6=98=BE=E7=A4=BA=E7=9A=84=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=88=E6=94=B9=E7=94=A8=E7=BD=91=E7=BB=9C=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |   4 +-
 .../swiper-vertical-video.uvue                | 106 ++++++++++++------
 static/template/scroll-fold-nav/back.png      | Bin 2903 -> 3171 bytes
 3 files changed, 75 insertions(+), 35 deletions(-)

diff --git a/pages.json b/pages.json
index c31a0756..5d0fa169 100644
--- a/pages.json
+++ b/pages.json
@@ -668,7 +668,7 @@
 		{
 			"path": "pages/template/drop-card/drop-card",
 			"style": {
-				"navigationBarTitleText": ""
+				"navigationBarTitleText": "drop-card"
 			}
 		},
 		{
@@ -698,7 +698,7 @@
 		{
 			"path": "pages/template/swiper-vertical-video/swiper-vertical-video",
 			"style": {
-				"navigationBarTitleText": ""
+				"navigationStyle": "custom"
 			}
 		},
 		{
diff --git a/pages/template/swiper-vertical-video/swiper-vertical-video.uvue b/pages/template/swiper-vertical-video/swiper-vertical-video.uvue
index 39433efc..5e40ecb0 100644
--- a/pages/template/swiper-vertical-video/swiper-vertical-video.uvue
+++ b/pages/template/swiper-vertical-video/swiper-vertical-video.uvue
@@ -1,12 +1,15 @@
 <template>
 	<view class="page">
+    <view @click="back" class="nav-back">
+    	<image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
+    </view>
     <swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange" @transition="onTransition">
 			<swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i">
-				<video ref="video" class="video-box" :id="item._id" :src="item.src" :poster="item.poster_src" :show-center-play-btn="false" :autoplay="false" :controls="false" :loop="true" @play="onPlay(i)" @pause="onPause(i)"></video>
+				<video ref="video" class="video-box" objectFit="cover" :id="item._id" @loadstart="onLoadstart(i)" :src="item.src" :poster="item.poster_src" :show-center-play-btn="false" :autoplay="false" :controls="false" :loop="true" @play="onPlay(i)" @pause="onPause(i)"></video>
 				<view class="video-cover" @click="changeState(i)">
-					<image v-if="!state[i]" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image>
+					<image v-if="state[i] === 'onPause'" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image>
 				</view>
-				<view class="video-info">
+				<view class="video-info" v-if="0">
 					<text class="video-info-text">容器：第 {{i}} 个</text>
 					<text class="video-info-text">内容：{{item.content}}</text>
 				</view>
@@ -14,13 +17,13 @@
 		</swiper>
     <view class="debug-info" v-if="0">
       <text class="status-text">debug-info 播放状态:</text>
-      <text class="status-text" v-for="(value,index) in state">第{{index+1}}个:{{value?'播放中':'已暂停'}}</text>
+      <text class="status-text" v-for="(value,index) in state">第{{index+1}}个:{{ value }}</text>
     </view>
 	</view>
 </template>
 <script>
 	import { VideoNode } from "uts.sdk.modules.DCloudUniVideo";
-	type ListItem = { _id : string, content : string, src : string, poster_src : string }
+	type ListItem = { _id : string, content : string, src : string, poster_src : string }
 	let page : number = 0;
 
 	export default {
@@ -31,7 +34,7 @@
 				visibleList: [] as ListItem[],// 提高性能 可见的只有3个
 				current: 0 as number,
 				index: 0,
-				state: [false, false, false] as boolean[]
+				state: ["unPlay", "unPlay", "unPlay"] as string[]
 			}
 		},
 		beforeCreate() {
@@ -66,13 +69,13 @@
 				}
 			},
 			current(current) {
-				this.state.forEach((val : boolean, index : number) => {
+				this.state.forEach((val : string, index : number) => {
 					if (index === current) {
 						this.doPlay(current)
-					} else if (val) {
+					} else if (val === 'onPlay') {
 						// 除了选中的其他已经播放的都需要停止
-						this.doPause(index)
-						console.log('index:' + index + '已被执行暂停');
+						this.doStop(index)
+						console.log('index:' + index + '已被执行停止');
 					}
 				})
 			}
@@ -83,45 +86,51 @@
 		},
 		methods: {
 			changeState(index : number) {
-				if (this.state[index]) {
+				if (this.state[index] === 'onPlay') {
 					this.doPause(index)
 				} else {
 					this.doPlay(current)
 				}
-			},
+			},
+      onLoadstart(index : number) {
+        console.error("onLoadstart  video" + index );
+      },
 			doPlay(index : number) {
         // console.log("doPlay  video" + index,(this.$refs["video"] as VideoNode[])[0] );
 				(this.$refs["video"] as VideoNode[])[index].play()
 			},
-			doPause(index : number) {
-				(this.$refs["video"] as VideoNode[])[index].pause()
-				console.log("doPause  video-" + index);
-			},
+			doStop(index : number) {
+				(this.$refs["video"] as VideoNode[])[index].stop()
+				console.log("doPause  video-" + index);
+        
+        // TODO 临时方案：解决.stop()时触发了doPause的问题
+        setTimeout(()=>{
+          this.state[index] = 'unPlay'
+        },1000)
+			},
+      doPause(index : number) {
+      	(this.$refs["video"] as VideoNode[])[index].pause()
+      	console.log("doPause  video-" + index);
+      },
 			onPause(index : number) {
-				this.state[index] = false
+				this.state[index] = 'onPause'
 				console.log('onPause', index);
 			},
 			onPlay(index : number) {
-				this.state[index] = true
+				this.state[index] = 'onPlay'
 				console.log('onPlay', index);
 			},
 			getData() : ListItem[] {
-				/* Promise 暂不支持
-				Promise<void> 
-				return new Promise((resolve) => {
-					resolve();
-				});*/
-
 				let videoUrlList = [
-					'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/video/uts.mp4',
-					'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/video/uni-ai.mp4',
-					'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/video/uni-verify.mp4'
+					'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uts.mp4',
+					'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uni-ai.mp4',
+					'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uni-verify.mp4'
 				] as string[]
 
 				let posterSrcList = [
-					'/static/template/swiper-vertical-video/poster/uni-uts.jpg',
-					'/static/template/swiper-vertical-video/poster/uni-ai.jpg',
-					'/static/template/swiper-vertical-video/poster/uni-verify.jpg'
+					'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-uts.jpg',
+					'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-ai.jpg',
+					'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/images/swiper-vertical-video-poster/uni-verify.jpg'
 				] as string[]
 
 				let list = [] as ListItem[];
@@ -143,7 +152,20 @@
 			},
 			onTransition(/*e : SwiperTransitionEvent*/) {
 				// console.log('onTransition e.detail.dx', e.detail.dx);
-			}
+			},
+      back() {
+      	uni.navigateBack({
+      		success(result) {
+      			console.log('navigateBack success', result.errMsg)
+      		},
+      		fail(error) {
+      			console.log('navigateBack fail', error.errMsg)
+      		},
+      		complete(result) {
+      			console.log('navigateBack complete', result.errMsg)
+      		},
+      	})
+      }
 		}
 	}
 </script>
@@ -179,8 +201,8 @@
 	}
   
   .play-btn {
-  	width: 30px;
-  	height: 30px;
+  	width: 80rpx;
+  	height: 80rpx;
   	color: #FFF;
   }
 
@@ -206,4 +228,22 @@
     color:red;
     padding: 15px;
   }
+  
+  .nav-back {
+  	position: absolute;
+  	top: 20px;
+  	left: 8px;
+    background-color: rgba(220, 220, 220, 0.8);
+    border-radius: 100px;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+  }
+  
+  .nav-back .back-img {
+  	width: 14px;
+    height: 14px;
+  }
 </style>
\ No newline at end of file
diff --git a/static/template/scroll-fold-nav/back.png b/static/template/scroll-fold-nav/back.png
index b10373991bc1b31ca5e7cdf6aa06551efff34809..964e819a43776429f4a195cf564cd280bf01391c 100644
GIT binary patch
delta 1638
zcma)#TTl~s6o>IokX?pL0u_a(bV(M1*g%L7LI!cMp=^|!)mre<8re{AM7b$qM`JX~
zuHv#R4i}4w)>Yv_QK@)?DI$YNy%ZTmpy+goqL9`WbwCSa<3k@hV`qBiJp9i0`({p`
z@9-Q(4Q8@uHDy4fmMfLZBce2lNKHiKJcU}LP)Lxixp|soLy?})7wNV7BEtfSQlXqL
zSNuz6ozu{mOr<g^D@rd{5qhOOa(<Rtu8uaS<k5y`<+{i$VqIpIzNyGL5>)mJR0;pb
zmLP>i30sOZ#o309?|oZYEr_dRT{ap2$eO(7<m6JU)5b5~TK8N3LiU5rbFTjy?i=BX
zd>!W0xn#YL*em<Fqs^zyCF%IhdpGd{a?ef3M=JfkwawrC${G8H=PzIW_{ciaaERD;
zdCcR<GRJ-R#fukCe{Dbe$|+50YIFMUHSWB!%Il1|x3~9HV)m_RG?k6T$BS9x!jd)H
zrr*5k&XhOaz-sOtL&MqFDf@I2`bhRV_Z79mCi9KHR6SJvwsCd&FhAL-vz$`*jtbi2
zCe97|r+Q7=EA7omm4fz>&W;Lu^H2LDFY5&DCp$ZPVoiDa#bTN6(9~EOf~t(y4+z@D
z`BRl#YbheapFbH8KWAGG#U`6#L+pL4^IMX~m$A{6vQWn3?#Y<p$*=>R6%d!m&xuF2
zi>~9~S*e;vm^gA62RT-Cun-^Yh^W8@f@nX8OXh1RY(Pr;!JM40sl^5YX%~p|;L}NL
zR7ShN+(tg#Sc8oQ(X${fg-@rjQ7JtO=EC^&T5L3s_JBA~{sD<~%V-an+rU4l!McNJ
z0C7oth#Bja(z_t;6F#I2>kgy=%(?R+2eD=uy$dE*@ga3svy^s&h!6RCGj?A_?}Lan
ze0>>q-$7yGBfkD1R^^~Zn8@Jk>#!;*Jrg4Q_-r%wL`Lt0h_CqUGVF<i!bAX{eGoh0
zlXy*_JfQZMF~ig`XAncHHG#~Z9X%pbnUuZ_+4A_O4CX1NQ()T`{%H-impWDmF4d}q
zT^=3r-X^=$GYqzc=I8Cf;=En^AR<w04-)1Z6-Oqpj;lv3&LY<fqfx^AJSM;qUB~3Y
ze8u8a6S=!*8>|(JkC!^Eo|Rr&anjuagkO8E%DIHKjZuBV#F5`OE@)e1G0g62h5LlA
zw>C1psLbc~Y**dD5K=Cyo97vJ{&GAW<at`y^@U6quwjAVu_H~eQ+2jM<0;pp?%+}i
zx_W&SGtxhlDqe!3Inm5F{X-k}n{_KaP~F4rTayFX+vmky8CzD_Ca6A<?)pkkR0R8+
z55Ohf!A}DjEh=uP#=I-?%od>2w&SfXENK>Pb9YFtqfzhbBO~wX{STcTwUfzCnp*|q
z75K%^jL4Uid7hx)Fn$qbrnQT_P3|HXT-t+cWXvGNWrCP8Toc4xqqt9jUm|)~)U{Re
zjKpXun*!M!aVK^{q#G6}599v9ObN*?1-0e4KgyI)Tm-1K;{FoGKyo6GLF4`iW1zSK
zkYT|?gPF}F_c_QYH{zivvzg+QAj67>N|;=d^9KDi9*Quz6qg73Ex21Sqa?XBFt-$U
zLz#0VrvP)yaW@I0q&Oj%TaCLR%sGn41aqyp3S~4TAq5SkxC&t|lY{{@l;bNLlp=ya
zLp8p_K`BBH8mzc4%BV;q5eRZhabJXKCW$PNQ;ugjFhvA|oN7GFK`BCF`XLqdfjBQo
z42!)9WTg-nF7eYL)1n&?c-C82F;!#hu~BY8%#K^LZd|iVN@6!3@rJogg$d&bIJ&e@
zTfo|iEcx9MA^TdTD-^W5RM_*2$7Y0dC!j{%cu_}5c;%Gxt$MI2e)5+G$puxmJ7{B-
zfA$ifw>F^*(GrVoT5jE5y9P=2hN4TXwhXqBZ5b+@%4NfwzGZhbKTIDh@M_O}NK9~3
zJJ?NeEfb0CTh({j3B|YX+__+xvG1|W*Ifv`Zv+0JlOJE*4SR@_(_5Szqf1E9o?f(e
F*Wb>{p=$sD

delta 1432
zcmZ{kTT~NQ6oy$7F3A!?E`Y&?Fo_Wf3e*&IK#-6QI-y7rs4Xg#l%S{!BnU!mF-D>e
zf-wXaqSC}jjdyNpD~Ko;C3uB`QmPaPQEp<@T7{*wJyV~ZH4png`~SavUd|q7^}1;h
z$gZ_ExELy3VdqNAOV12mnVKz?NwcM>G&{94%+8~fOu|Z??Yu5*BMG6>T>Av&+e|&#
z#>OsKf`-TERZKo!o6&->c6J%M&Mi2xVDptaV;}1;@rg6X1&F44q>-CdyCz@QOgTC6
z_nhnb|MqZfE=IvM;UE8p1`hrheKPL3JSsh*Y%5x^#owP!pJ+&G+A^%K4~`Znm3b=b
zg@w1jM;rSU6LnP+6TP!kJzQ;M#)X?oW%@5w69O@O>9YOl!7e1@QIlsdYcb`gnhloA
z3Z^6!5_of|K1__ebU3dAanZwC=ni{^VQv=QczIar&8L}F!h7sPj_t5YMAa?Q959?6
zKR8!Ql4*uRTjdyEd#6pg$W0~VYhIH1OnI>ccE?lJL46W-3e!xrunZzbVG0$Jz#0YF
zDzTIoiS)2$nrscXl$VM);FMx@wv-<gEyhWz_hL3mw))9mM8IKq!JoFT_9Iggc!_0@
zqf#SN{jXJcfp44xkNS@=9kvY8<Lr4<PGBOev<$k(+3~3Qz?HBCzTpCF@vXr2h80Yc
z*Ywr^&EDgPvaP~(pnuW`(H-iYm^gy8&_Js)+Y^+ry+oPw366LhZ;RT(1^oaRIqpM~
z$E;ZbT5}r6D7)v^A7INdlZixkxD*JiY2l@ywOSc48`P3GP(KU++_Y6p;`l3Plzs8s
zCXmQ^07izMV&KSV#7hAGav!+)_PB*Kd1oaLSd%<Bpw(vt<sTkyIKpb?f^wA%0E+pW
zVM}sA9{|j~1purE&qZy`=5641%MY<}q`X=0uC)5LPTvUc)<FqnPeOV3mfrWJ9yt_T
z(D*E*8W|ODf=4_?TpaqnXUyl3(a15;n;iiK$0HrGlFH__f882`?l;WPDgBs}HDyE*
zA)c*+>J!t7)I*cgcuq&=j*`xcR?)+pt7zNiJ&SPl`pE`tHl^~>jBgpnN+_#VM6@VR
z)txWE)%4UvZx>2sN0ZKvu{_Is-is%7+1p<<kFh*+^zJ^MF?a94-35&8tF7B|OFGYf
zcOOJJuKCH4{MV)_=5C&GejumbmC}ETfvK_4&o7C1sQBF(dj^;B`|40Fxumno3o4{h
z(l>b#LT~zCZ1e*{*{Sg&5v{bvK*fC9twM2i!x3k`nBUVK0n>R#O$On9lH&@{-e<26
z=%7RbeQT76WHwe2`S$T;gs9*W=5`h_M>`Nhz#8|=0x;`mG63TqkP_y1P96aE+lDC-
zPl<{f1Vm<|i2`gPTh4$1En7`QCM4q)AyQ0EK)g>MC&bTV1mGIeydS%~0v^EC2HRH!
z*i<x}i>v*i>D?GkGkcZ5+Av&}0V#H3Pv>bJ3T4rdVi)#wu6BN*%nv*#or26S!Jfie
z4^$~!rh3NL)l&GRlHxDm!?-L8>cIHJbZkA(y+}mW2I<~9wsX72wqIR#t$Qr{ddy9*
zErNJicc5y6!2sU&kYv4<^rS)}WEa>%LEo6LB%$MOTSx#8M~S770OjX1u<)h4X>*7R
zhp%m6@aiAGF+!^N7rwgNq@&44Lw)L~v3=>>7nAqadQLPnDX(JFVYLR)9QoS#kamC1
n)3&iIV&P9`^?rQGeb|3PO1ERF`VJM>#|C_oh-kD*oV@ElM8r?1

-- 
GitLab