dreamland/pages/dream/view/vodShort.vue

<template name="vodShort">
	<view>
		<swiper class="swiper" :circular="circular" :vertical="vertical" @change="changeVod">
			<swiper-item v-for="(v, k) in item" :key="k">
				<dever-video
				:src="v.video" 
				:pic="v.pic" 
				:index="k" 
				:vid="v.id"
				:type="v.type"
				:disabled="false"
				:position_item="v.text"
				:position_save="v.is_button"
				:load.sync="load"
				ref="video"
				>
				</dever-video>
			</swiper-item>
		</swiper>
		<!--dever-swiper class="swiper" :circular="circular" :vertical="vertical" :item="item" v-slot="{k,v}" @change="changeVod">
			<dever-video
			:src="v.video" 
			:pic="v.pic" 
			:index="k" 
			:vid="v.id"
			:type="v.type"
			:disabled="false"
			:position_item="v.text"
			:position_save="v.is_button"
			:load.sync="load"
			ref="video"
			>
			</dever-video>
		</dever-swiper-->
	</view>
</template>

<script>
import deverVideo from '@/lib/dever/components/video.nvue';
import deverSwiper from '@/lib/dever/components/swiper.vue';
var play = true;
export default {
	name: "vodShort",
	props: {
		control : {
			type : Object,
			defalut : {}
		},
		item : {
			type    : Array,
			defalut : {}
		},
		index : {
			type    : Number,
			default	: 0
		},
	},
	data() {
		return {
			circular : true,
			vertical : true,
			load : false,
			current_index: 0,
		};
	},
	created() {
		
	},
	mounted() {
		this.control[this.index] = this;
		for(var i in this.$refs.video) {
			this.$refs.video[i].autoStart();
		}
	},
	methods:{
		start : function() {
			if (this.Dever.source == 'h5' && uni.getSystemInfoSync().platform == 'ios') {
				return;
			}
			for(var i in this.$refs.video) {
				if (this.current_index == i) {
					this.$refs.video[this.current_index].start();
				}
			}
		},
		stop : function() {
			this.$refs.video[this.current_index].stop(true);
		},
		changeVod : function(e)  {
			var self = this;
			self.$nextTick(()=>{
				this.$refs.video[this.current_index].stop(false);
				this.current_index = e.detail.current;
				self.start();
			});
					
		},
	},

	components:{
		deverVideo,deverSwiper
	}
}
</script>

<style>
.swiper{
	width: 100vw;
	height: 100vh;	
	/*position: fixed;*/
	position: relative;
	top: 0;
	left: 0;
}

</style>