当微信小程序官方提供的 audio 组件样式不满足我们的需求时，我们可以自定义一个音频播放器，由于不可抗力原因，我用uView框架中的 Popup 弹出层 实现了一个音频播放器弹框，大家根据需求做参考就好啦，话不多说，直接看效果吧～
1、效果图：暂停&播放
2、具体实现
2.1 准备按钮图片
2.2 使用组件
ps：下面代码中用到的示例mp3文件地址是从网上随便找的，如有侵权联系我删除，谢谢。
<template>
<MyAudio ref="myAudio" :show.sync="showAudio"/>
</template>
<script>
import MyAudio from "@/components/MyAudio";
export default {
components: {
MyAudio
},
data() {
return {
showAudio: false,
path: 'http://music.163/song/media/outer/url?id=447925558.mp3'
}
},
onLoad(options) {
this.showAudio = true
this.$refs.myAudio.init(this.path)
}
}
</script>2.3 封装MyAudio组件
2.3.1 MyAudio.vue 文件
<template>
<u-popup
:show="show"
mode="center"
:closeable="true"
:safeAreaInsetBottom="false"
round="16rpx"
@close="clickMask"
>
<view &发布者：admin，转转请注明出处：http://www.yc00.com/web/1754991323a5224659.html
评论列表（0条）