小程序点读第一天uniapp开发

组件

components/test-zj/test-zj.vue

<template>
	<view :style="{'width':movies.width,'height':movies.height,'left':movies.left,'top':movies.top}" class="baofeng" @tap="play(movies.mp3)">
		我是小强oye{{movies.tz}}
	</view>
</template>

<script>
	var music = null;
	music = uni.createInnerAudioContext(); //创建播放器对象
	export default {
	
		data() {
			return {
				movies:''
			}
		},
		 props: {
			 movies:Object
			 
		 },
		methods: {
			play(e){
					music.src = e;
					music.play(); //执行播放
					music.onEnded(() => {
						//播放结束
						music = null;
					});	
			}
		}
	}
</script>

<style>
.baofeng{ border: #000 1px solid; position: absolute;}
</style>

调用组件

<template>
	<view class="content">
		<view  v-for='(item,index) in option' :key='index'>
<test-zj :movies="item"></test-zj>
</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				option:[{tz:'你好1',width:'745upx',height:'250upx',left:'0upx;','top':'0upx','mp3':'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'},
				{tz:'你好2',width:'345upx',height:'250upx',left:'0upx;','top':'250upx','mp3':'https://sp-sycdn.kuwo.cn/7ffa24ec30aefb8e5b095dbe2b1b7fec/61971679/resource/n1/75/10/307344178.mp3'},
				{tz:'你好3',width:'745upx',height:'250upx',left:'0upx;','top':'500upx','mp3':'https://sc-sycdn.kuwo.cn/8a71de16c448054b622ae7b44aadbe2f/61971695/resource/n1/66/15/2796814273.mp3'}]
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.content{ background: #007AFF; width: 100%; height: 400px; position: relative;}
</style>