记一次小程序的遇到的问题（使用uniapp编写）

记一次小程序的遇到的问题（使用uniapp编写）

1.安卓视频调用pause()无效和视频封面无法设置大小

<template>
	<view class="voide-box" :style="{ '--width': width, '--height': height }">
		<video v-if="!show" id="myVideo" @pause="onPause" @ended="ended" @play="play" @click="change()" :muted="true" :controls="false" :src="video"></video>
		<image v-show="show||showPlay" src="../static/images/play.png" class="play-btn" @click="playVoide()"></image>
		<image v-show="show" v-if="videoImg" :src="videoImg" class="voide-img"></image>
	</view>
</template>

<script>
import api from '@/utils/common/api';
export default {
	name: 'custom-video',
	props: {
		width: {
			type: String,
			default: ''
		},
		height: {
			type: String,
			default: ''
		},
		video: {
			type: String,
			default: ''
		},
		videoImg: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			show: true,
			showPlay:true,
			videoNode: null
		};
	},
	onReady: function(res) {
		this.videoNode = uni.createVideoContext('myVideo',this);
		console.log(api.globalData.systemInfo.system);
	},
	methods: {
		playVoide() {
			this.show = false;
			this.showPlay = false;
			this.videoNode.play();
		},
		onPause(){
			this.showPlay = true;
		},
		ended(){
			this.show = true;
			this.showPlay = true;
		},
		play(){
			this.showPlay = false;
		},
		change(){
			if(this.showPlay){
				this.videoNode.play();
			}else{
				if(api.globalData.systemInfo.system=='android'){
					this.show = true;
				}else{
					this.videoNode.pause();
				}

			}
		}
	}
};
</script>

<style scoped>
.voide-box {
	position: relative;
	height: var(--height);
	width: var(--width);
}
video {
	height: var(--height);
	width: var(--width);
}
.voide-img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 0;
	background-color: white;
}
.play-btn {
	position: absolute;
	width: 140rpx;
	height: 140rpx;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
</style>

2.使用循环动态设置事假失效

简单的数组，没有id，key设置的就是本身

<div
    class="select-item"
            v-for="(item, index) in time"
            :key="item"
            :class="activeTime == index ? 'selected' : ''"
            @click="changeTime(index)">{{ item}}
</div>

观察生成的节点发现是item重复的部分没有重新渲染，而新生成的index是重新从开始设置的：

后来修改为

this.time= [];
setTimeout(()=>{
	this.time = arr;
})

定时器的作用是想等空数组渲染让后再重新赋值，类似于强制重新渲染