小程序点读第一天uniapp开发

curlmen

于 2021-11-19 11:19:42 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：混合开发文章标签： php html5 vim

本文链接：https://blog.youkuaiyun.com/curlmen/article/details/121418520

组件

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>