Revert "fix: 修正不符合vue规范的用法"

This reverts commit a52ecdbb.

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

-<template>
+<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 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 @click="changeState(i)" ref="video" class="video-box" objectFit="cover" :id="'video-'+i"
           @loadstart="onLoadstart(i)" :src="item.src" :poster="item.poster_src"
           :autoplay="false" :show-center-play-btn="false"
           :loop="true" @play="onPlay(i)" @pause="onPause(i)"
         ></video>
-				<view class="video-cover" @click="changeState(i)">
-					<image v-if="state[i] === 'pause'" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image>
-				</view>
-				<view class="video-info" v-if="0">
-					<text class="video-info-text">容器：第 {{i}} 个</text>
-					<text class="video-info-text">内容：{{item.content}}</text>
-				</view>
+				<view class="video-cover" @click="changeState(i)">
+					<image v-if="state[i] === 'pause'" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image>
+				</view>
+				<view class="video-info" v-if="0">
+					<text class="video-info-text">容器：第 {{i}} 个</text>
+					<text class="video-info-text">内容：{{item.content}}</text>
+				</view>
 			</swiper-item>
 		</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>
-    </view>
-	</view>
-</template>
-<script>
+      <text class="status-text">debug-info 播放状态:</text>
+      <text class="status-text" v-for="(value,index) in state">第{{index+1}}个:{{ value }}</text>
+    </view>
+	</view>
+</template>
+<script>
 	type ListItem = { _id : string, content : string, src : string, poster_src : string }
 	let page : number = 0,
-  currentPageIsShow : boolean = true;
-
-	export default {
-		components: {},
-		data() {
+  currentPageIsShow : boolean = true;
+
+	export default {
+		components: {},
+		data() {
 			return {
-        $videoContextMap:new Map<string, VideoContext>(),
-				list: [] as ListItem[],
-				visibleList: [] as ListItem[],// 提高性能 可见的只有3个
-				current: 0 as number,
-				index: 0,
+        $videoContextMap:new Map<string, VideoContext>(),
+				list: [] as ListItem[],
+				visibleList: [] as ListItem[],// 提高性能 可见的只有3个
+				current: 0 as number,
+				index: 0,
 				state: ["unPlay", "unPlay", "unPlay"] as string[]
-			}
-		},
-		created() {
-			this.list = this.getData()
-			this.visibleList = this.list.slice(0, 3)
-		},
-		watch: {
-			current(current : number, oldCurrent : number) {
-				let changeNumber = current - oldCurrent
-				if (changeNumber == 1 || changeNumber == -2) {
-					// console.error('向右');
-					this.index++
-				} else {
-					// console.error('向左');
-					this.index--
-				}
-				// //翻页（3项为一页）
-				if (Math.abs(changeNumber) == 2) {
-					// console.log('翻页');
-					page = Math.floor(this.index / 3);
-					// console.log(this.index);
-					// console.log('page',page);
-					// console.log('slice',3*page,3*page+3);
-					if (this.list.length < 3 * page + 3) {
-						let list : ListItem[] = this.getData()
-						this.list.push(...list)
-					}
-
-					let visibleList = this.list.slice(3 * page, 3 * page + 3)
-					// 换数据
-					this.visibleList = visibleList
+			}
+		},
+		beforeCreate() {
+			this.list = this.getData()
+			this.visibleList = this.list.slice(0, 3)
+		},
+		watch: {
+			current(current : number, oldCurrent : number) {
+				let changeNumber = current - oldCurrent
+				if (changeNumber == 1 || changeNumber == -2) {
+					// console.error('向右');
+					this.index++
+				} else {
+					// console.error('向左');
+					this.index--
+				}
+				// //翻页（3项为一页）
+				if (Math.abs(changeNumber) == 2) {
+					// console.log('翻页');
+					page = Math.floor(this.index / 3);
+					// console.log(this.index);
+					// console.log('page',page);
+					// console.log('slice',3*page,3*page+3);
+					if (this.list.length < 3 * page + 3) {
+						let list : ListItem[] = this.getData()
+						this.list.push(...list)
+					}
+
+					let visibleList = this.list.slice(3 * page, 3 * page + 3)
+					// 换数据
+					this.visibleList = visibleList
 				}
 
-				this.state.forEach((val : string, index : number) => {
-					if (index === current) {
-						this.doPlay(current)
-					} else {
-						// 除了选中的其他已经播放的都需要停止
-						this.doStop(index)
-						console.log('index:' + index + '已被执行停止');
-					}
-				})
-			}
-		},
-		onReady() {
-			// 一启动完成，就播放第一个
+				this.state.forEach((val : string, index : number) => {
+					if (index === current) {
+						this.doPlay(current)
+					} else {
+						// 除了选中的其他已经播放的都需要停止
+						this.doStop(index)
+						console.log('index:' + index + '已被执行停止');
+					}
+				})
+			}
+		},
+		onReady() {
+			// 一启动完成，就播放第一个
 			this.doPlay(0)
 		},
     onShow(){
@@ -98,30 +98,30 @@
     },
     onUnload() {
       this.doPause(this.current)
-    },
+    },
 		methods: {
-			changeState(index : number) {
-				if (this.state[index] === 'play') {
-					this.doPause(index)
-				} else {
-					this.doPlay(this.current)
-				}
+			changeState(index : number) {
+				if (this.state[index] === 'play') {
+					this.doPause(index)
+				} else {
+					this.doPlay(this.current)
+				}
 			},
       onLoadstart(index : number) {
         console.error("onLoadstart  video" + index );
       },
       getVideoContext(index : number) : VideoContext{
-        let videoContext : VideoContext | null = this.$data.$videoContextMap.get('video-'+index)
+        let videoContext : VideoContext | null = this.$videoContextMap.get('video-'+index)
         if(videoContext == null){
           videoContext = uni.createVideoContext('video-'+index, this) as VideoContext
-          this.$data.$videoContextMap.set('video-'+index,videoContext)
+          this.$videoContextMap.set('video-'+index,videoContext)
         }
         return videoContext
-      },
+      },
 			doPlay(index : number) {
-        console.log("doPlay  video" + index );
+        console.log("doPlay  video" + index );
 				this.getVideoContext(index).play()
-			},
+			},
 			doStop(index : number) {
 				console.log("doStop  video-" + index);
         this.getVideoContext(index).stop();
@@ -133,51 +133,51 @@
       doPause(index : number) {
       	this.getVideoContext(index).pause()
       	console.log("doPause  video-" + index);
-      },
-			onPause(index : number) {
-				this.state[index] = 'pause'
-				console.log('onPause', index);
-			},
+      },
+			onPause(index : number) {
+				this.state[index] = 'pause'
+				console.log('onPause', index);
+			},
 			onPlay(index : number) {
         if(this.current != index || !currentPageIsShow){
           this.onPause(index)
         }else{
           this.state[index] = 'play'
           console.log('onPlay', index);
-        }
-			},
-			getData() : ListItem[] {
-				let videoUrlList = [
-					'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 = [
-					'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[];
-				for (let i = 0; i < 6; i++) {
-					let index = this.list.length + i;
-					let listItem : ListItem = {
-						"_id": "a00" + index,
-						"content": "这是第" + index + "条数据，url地址" + videoUrlList[i % 3],
-						"src": videoUrlList[i % 3],
-						"poster_src": posterSrcList[i % 3]
-					}
-					list.push(listItem)
-				}
-				return list
-			},
-			onSwiperChange(e : SwiperChangeEvent) {
-				// console.error('SwiperChangeEvent',e.detail.current);
-				this.current = e.detail.current;
-			},
-			onTransition(/*e : SwiperTransitionEvent*/) {
-				// console.log('onTransition e.detail.dx', e.detail.dx);
+        }
+			},
+			getData() : ListItem[] {
+				let videoUrlList = [
+					'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 = [
+					'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[];
+				for (let i = 0; i < 6; i++) {
+					let index = this.list.length + i;
+					let listItem : ListItem = {
+						"_id": "a00" + index,
+						"content": "这是第" + index + "条数据，url地址" + videoUrlList[i % 3],
+						"src": videoUrlList[i % 3],
+						"poster_src": posterSrcList[i % 3]
+					}
+					list.push(listItem)
+				}
+				return list
+			},
+			onSwiperChange(e : SwiperChangeEvent) {
+				// console.error('SwiperChangeEvent',e.detail.current);
+				this.current = e.detail.current;
+			},
+			onTransition(/*e : SwiperTransitionEvent*/) {
+				// console.log('onTransition e.detail.dx', e.detail.dx);
 			},
       back() {
       	uni.navigateBack({
@@ -191,58 +191,58 @@
       			console.log('navigateBack complete', result.errMsg)
       		}
       	})
-      }
-		}
-	}
-</script>
-
-<style>
-	.page {
+      }
+		}
+	}
+</script>
+
+<style>
+	.page {
     width: 750rpx;
-    flex: 1;
+    flex: 1;
 	}
-
-	.swiper,
-	.swiper-item,
-	.video-box,
-	.video-cover {
+
+	.swiper,
+	.swiper-item,
+	.video-box,
+	.video-cover {
 		width:750rpx;
     flex: 1;
     height: 100%;
-	}
-
-	.swiper-item {
-		position: relative;
-	}
-
+	}
+
+	.swiper-item {
+		position: relative;
+	}
+
 	.video-box {
     width: 750rpx;
-  }
-
+  }
+
 	.video-cover {
-    position: absolute;
-		justify-content: center;
-		align-items: center;
+    position: absolute;
+		justify-content: center;
+		align-items: center;
 		align-content: center;
 	}
 
   .play-btn {
   	width: 80rpx;
   	height: 80rpx;
-  }
-
-	.video-info {
+  }
+
+	.video-info {
     position: absolute;
     bottom: 0;
     padding: 15px;
-	}
-
-	.video-info-text {
-		font-size: 14px;
-		color: red;
-		line-height: 20px;
-	}
-
+	}
+
+	.video-info-text {
+		font-size: 14px;
+		color: red;
+		line-height: 20px;
+	}
+
   .debug-info{
     position: fixed;
     top:15px;