perf: 优化竖滑视频示例样式

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

 <template>
 	<view class="page">
-    <view style="padding: 10px;">
-      <text>复用组件，无限滚动、加载、浏览视频的短视频模板</text>
+		<view class="header-tips" style="padding: 10px;">
+			<text class="tip-text">当前示例为无限滚动、加载、浏览视频的短视频模板的演示，提供了组件复用的方式。为提高性能可见的视频项只有 3 个</text>
 
-      <text>【已知问题】swiper 组件竖滑动有 bug，先横向滑动</text>
-
-      <view style="flex-direction: row;font-size: 10px;">
-        <view>【状态】</view>
-        <text v-for="(value,index) in state">
-           第{{index+1}}个:{{value?'播放中':'已暂停'}}
-        </text>
+			<view class="tip-status-box">
+				<text class="status-text">播放状态:</text>
+				<text class="status-text" v-for="(value,index) in state">第{{index+1}}个:{{value?'播放中':'已暂停'}}</text>
 			</view>
 		</view>
-    <swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange"
-      @transition="onTransition">
+		<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-'+i" class="video" :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-'+i" class="video" :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>
 				<view class="video-top-view" @click="changeState(i)">
 					<image v-if="!state[i]" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image>
 				</view>
-        <view>
-          <text>第：{{i}}个容器，内容：{{item.content}}</text>
+				<view class="video-info">
+					<text class="video-info-text">容器：第 {{i}} 个</text>
+					<text class="video-info-text">内容：{{item.content}}</text>
+				</view>
+				<view class="swiper-item-info">
+					<text class="info-text">向上滑动查看下一个视频</text>
 				</view>
 			</swiper-item>
 		</swiper>
@@ -31,15 +27,15 @@
 </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 {
-    components:{},
-    computed:{
-      currentVideo():VideoNode{
-        console.log('"video-"+this.current',"video-"+this.current);
-        return this.$refs["video-"+this.current] as VideoNode
+		components: {},
+		computed: {
+			currentVideo() : VideoNode {
+				console.log('"video-"+this.current', "video-" + this.current);
+				return this.$refs["video-" + this.current] as VideoNode
 			}
 		},
 		data() {
@@ -48,7 +44,7 @@
 				visibleList: [] as ListItem[],// 提高性能 可见的只有3个
 				current: 0 as number,
 				index: 0,
-        state:[false,false,false] as boolean[]
+				state: [false, false, false] as boolean[]
 			}
 		},
 		beforeCreate() {
@@ -82,14 +78,14 @@
 					this.visibleList = visibleList
 				}
 			},
-      current(current){
-        this.state.forEach((val:boolean,index:number)=>{
-          if(index === current){
+			current(current) {
+				this.state.forEach((val : boolean, index : number) => {
+					if (index === current) {
 						this.doPlay(current)
-          }else if(val){
+					} else if (val) {
 						// 除了选中的其他已经播放的都需要停止
 						this.doPause(index)
-           console.log('index:'+index+'已被执行暂停');
+						console.log('index:' + index + '已被执行暂停');
 					}
 				})
 			}
@@ -99,28 +95,28 @@
 			this.doPlay(0)
 		},
 		methods: {
-      changeState(index:number){
-        if(this.state[index]){
+			changeState(index : number) {
+				if (this.state[index]) {
 					this.doPause(index)
-        }else{
+				} else {
 					this.doPlay(current)
 				}
 			},
-      doPlay(index:number){
-        (this.$refs["video-"+index] as VideoNode).play()
-        console.log("doPlay  video-"+index);
+			doPlay(index : number) {
+				(this.$refs["video-" + index] as VideoNode).play()
+				console.log("doPlay  video-" + index);
 			},
-      doPause(index:number){
-        (this.$refs["video-"+index] as VideoNode).pause()
-        console.log("doPause  video-"+index);
+			doPause(index : number) {
+				(this.$refs["video-" + index] as VideoNode).pause()
+				console.log("doPause  video-" + index);
 			},
-      onPause(index:number){
+			onPause(index : number) {
 				this.state[index] = false
-        console.log('onPause',index);
+				console.log('onPause', index);
 			},
-      onPlay(index:number){
+			onPlay(index : number) {
 				this.state[index] = true
-        console.log('onPlay',index);
+				console.log('onPlay', index);
 			},
 			getData() : ListItem[] {
 				/* Promise 暂不支持
@@ -146,9 +142,9 @@
 					let index = this.list.length + i;
 					let listItem : ListItem = {
 						"_id": "a00" + index,
-            "content": "这是第" + index + "条数据"+videoUrlList[i%3],
-            "src": videoUrlList[i%3],
-            "poster_src":posterSrcList[i%3]
+						"content": "这是第" + index + "条数据" + videoUrlList[i % 3],
+						"src": videoUrlList[i % 3],
+						"poster_src": posterSrcList[i % 3]
 					}
 					list.push(listItem)
 				}
@@ -171,23 +167,50 @@
 		/* width: 750rpx; */
 	}
 
+	.header-tips {
+		margin: 10px;
+		padding: 10px;
+		background-color: #fff;
+		border-radius: 5px;
+
+	}
+
+	.tip-text {
+		font-size: 14px;
+		color: #666;
+		line-height: 18px;
+	}
+
+	.tip-status-box {
+		margin-top: 10px;
+	}
+
+	.status-text {
+		font-size: 14px;
+		color: #666;
+	}
+
 	.swiper,
 	.swiper-item,
 	.video,
-  .video-top-view ,
+	.video-top-view,
 	.video-cover {
 		height: 750rpx;
 	}
 
 	.swiper {
 		flex: 1;
+		margin: 0 10px;
+		margin-bottom: 15px;
+		background-color: #fff;
+		border-radius: 5px;
 		/* border: 1px solid #000; */
 	}
 
 	.swiper-item {
 		flex: 1;
 		/* border: 1px solid red; */
-    padding: 10px 5px;
+		padding: 10px;
 		position: relative;
 	}
 
@@ -205,12 +228,39 @@
 		width: 750rpx;
 	}
 
+	.video-info {
+		margin-top: 10px;
+
+	}
+
+	.swiper-item-info {
+		position: absolute;
+		bottom: 15px;
+		left: 0;
+		right: 0;
+		flex-direction: row;
+		justify-content: center;
+	}
+
+	.info-text {
+		font-size: 12px;
+		color: #999;
+	}
+
+
+	.video-info-text {
+		font-size: 14px;
+		color: #666;
+		line-height: 20px;
+	}
+
 	.play-btn {
 		width: 30px;
 		height: 30px;
 		color: #FFF;
 	}
-  .video-cover{
+
+	.video-cover {
 		position: absolute;
 		width: 750rpx;
 		top: 0;