如何使用uni-app做一个音乐播放器_使用uniapp写一个音乐播放器app csdn

如何使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26