更新 示例模板竖划视频为全屏 修复 1. 视频加载和播放图标层叠问题 2. 封面不显示的问题（改用网络图片）

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"
 			}
 		},
 		{

pages/template/swiper-vertical-video/swiper-vertical-video.uvue

 <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