如何使用uni-app做一个音乐播放器

最新推荐文章于 2025-03-19 09:38:51 发布

白侯老哥

最新推荐文章于 2025-03-19 09:38:51 发布

阅读量9k

点赞数 15

文章标签： vue uni-app 前端

本文链接：https://blog.csdn.net/qq_51947492/article/details/118390524

版权

本文介绍如何利用uni-app的API创建一个自定义样式的音乐播放器。通过HBuilderX快速搭建uni-app项目，结合阿里巴巴icon图标库设计界面，并提供基本的样式代码示例，适合初学者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何使用uni-app做一个音乐播放器

uni-app提供给我们非常棒的API，可以做出很好看的自定义样式的音乐播放器

好的编译器可以让我们的项目事半功倍，HBuilderX可以很方便的创建uni-app项目，文件-新建-项目-uni-app项目-创建

首先我们先写一个简单的样式，一个歌曲列表和一个播放器
我的icon图标使用的是阿里巴巴的icon图标库https://www.iconfont.cn/ 不知道怎么使用的请自行百度

<template>
	<view class="content">
	<!-- 音乐列表 -->
		<view class="menu1">
			<view class="menu1_item" v-for="(item,i) in menu1" :key="i">
				<view class="item_warp" @click="playAudio(i)">
					<view class="item_icon t-icon" :class="item.isPlay?'t-icon-ziyuanldpi':'t-icon-bofang1'"></view>
					<view class="item_title">{
  {item.title}}</view>
				</view>
			</view>
		</view>
	<!-- 播放器 -->
		<view class="bar_warp" ref="bar_warp">
			<view class="bar_progress" ref="bar_progress">
				<view class="progress_warp">
					<view class="bar_left">
						<img :src="current.poster" alt="">
					</view>
					<view class="bar_mid">
						<view class="name">{
  {current.name}}</view>
						<view class="author">{
  {current.author}}</view>
						<view class="bar" ref="bar">
							<span class="icon" ref="icon"></span>
						</view>

最低0.47元/天解锁文章