dreamland/pages/dream/view/audioList.vue

<template name="audioList">
	<view>
		<swiper class="swiper" autoplay="false" vertical="true" interval="990000" @change="changeAudio" :current="current_index" :circular="circular">
			<swiper-item v-for="(v, k) in item" :key="k">
				<dever-audio
				:src="v.audio" 
				:pic="v.pic" 
				:lrc="v.lrc ? v.lrc : true"
				:title="v.name"
				:singer="v.singer"
				:lrc_color="v.color"
				:lrc_atcolor="v.atcolor"
				:control="true"
				:loop="true"
				:recycle="recycle"
				:load.sync="load"
				@setRecycle="setRecycle"
				@last="last"
				@next="next"
				ref="audio"
				>
				</dever-audio>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import deverAudio from '@/lib/dever/components/audio.nvue';
var play = true;
export default {
	name: "audioList",
	props: {
		control : {
			type : Object,
			value : null
		},
		item : {
			type    : Array,
			value	: null
		},
		index : 0
	},
	data() {
		return {
			recycle : true,
			circular : false,
			load : false,
			current_index: 0,
			total : 0,
		};
	},
	created() {
		
	},
	mounted() {
		this.control[this.index] = this;
		this.total = this.$refs.audio.length - 1;
	},
	methods:{
		start : function() {
			this.$refs.audio[this.current_index].start();
		},
		stop : function() {
			this.$refs.audio[this.current_index].stop(true);
		},
		changeAudio : function(e)  {
			this.change(e.detail.current);
		},
		change : function(index) {
			var self = this;
			self.$nextTick(()=>{
				this.$refs.audio[this.current_index].stop(false);
				this.current_index = index;
				setTimeout(function() {
					self.start();
				}, 200);
			});
		},
		next : function() {
			var current_index = this.current_index;
			if (current_index >= this.total) {
				current_index = 0;
			} else {
				current_index = current_index + 1;
			}
			this.change(current_index);
		},
		
		last : function() {
			var current_index = this.current_index;
			if (current_index == 0) {
				current_index = this.total;
			} else {
				current_index = current_index - 1;
			}
			this.change(current_index);
		},
		
		setRecycle : function() {
			this.recycle = !this.recycle;
			return this.recycle;
		}
	},

	components:{
		deverAudio
	}
}
</script>

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