文章目录
- 第一章 开发前的准备
* - 一、项目展示
- 二、项目分析
- 三、项目初始化
- 第二章 标签页切换
* - 一、任务分析
- 二、常用组件介绍
- 三、编写页面结构和样式
- 第三章 音乐推荐
* - 一、任务分析
- 二、组件介绍
- 三、编写音乐推荐页面结构和样式
- 第四章 播放器
* - 一、任务分析
- 二、组件介绍
- 三、实现播放器功能
- 四、编写播放器页面
- 第五章 播放列表
* - 一、任务分析
- 二、实现播放列表功能
- 三、测试播放列表切换功能
第一章 开发前的准备
一、项目展示
- 音乐小程序项目效果展示
- 音乐推荐页面展示
- 播放器展示
- 播放列表展示
; 二、项目分析
- 音乐小程序项目页面结构：
1.tab导航栏
2.content内容区
3.player音乐播放器控件
- 音乐小程序项目目录结构
标签 功能 app.js 应用程序的逻辑文件 app.json 应用程序的配置文件 pages/index/index.js index页面的逻辑文件 pages/index/index.json index页面的配置文件 pages/index/index.wxss index页面的样式文件
三、项目初始化
- 开发者工具创建空白项目：
- 创建完成的页面
- 修改
app.json
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "音乐",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
- 删除
index.wxml、index.wxss里的内容使其成为一个空白的页面
第二章 标签页切换
一、任务分析
- 标签页和页面（
info.wxml、play.wxml、palylist.wxml）结构图：
; 二、常用组件介绍
swiper常用属性：
可选值 说明 默认 indicator-dots Boolean 是否显示面板指示点，默认为false indicator-color Color 指示点颜色，默认为rgba(0,0,0,.3) indicator-active-color Color 当前选中的指示点颜色，默认为#000000 autoplay Boolean 是否自动切换，默认为false current Number 当前所在滑块的index，默认为0 current-item-id String 当前所在滑块的item-id（不能同时指定current） interval Number 自动切换时间间隔（毫秒），默认为5000 duration Number 滑动动画时长（毫秒），默认为500 circular Boolean 是否采用衔接滑动，默认为false vertical Boolean 滑动方向是否为纵向，默认为false bindchange EventHandle current改变时会触发change事件
swiper组件编写滑动页面结构：
<swiper>
<swiper-item style="background:#ccc">0swiper-item>
<swiper-item style="background:#ddd">1swiper-item>
<swiper-item style="background:#eee">2swiper-item>
swiper>
三、编写页面结构和样式
- 在
pages/index/index.wxml编写页面和tab导航栏
<view class="tab">
<view class="tab-item {
{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐view>
<view class="tab-item {
{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器view>
<view class="tab-item {
{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表view>
view>
<view class="content">view>
<view class="player">view>
- 在
pages/index/index.wxss编写页面样式和tab导航栏样式
page {
display: flex;
flex-direction: column;
background: #17181a;
color: #ccc;
height: 100%;
}
.tab {
display: flex;
}
.tab-item {
flex: 1;
font-size: 10pt;
text-align: center;
line-height: 72rpx;
border-bottom: 6rpx solid #eee;
}
.tab-item.active {
color: #c25b5b;
border-bottom-color: #c25b5b;
}
- 添加页面
info.wxml、playlist.wxml、play.wxml文件
- 实现标签页切换，通过滚动事件切换页面效果
<view class="tab">
<view class="tab-item {
{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐view>
<view class="tab-item {
{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器view>
<view class="tab-item {
{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表view>
view>
<view class="content">
<swiper current="{
{item}}" bindchange="changeTab">
<swiper-item>
<include src="info.wxml">include>
swiper-item>
<swiper-item>
<include src="play.wxml">include>
swiper-item>
<swiper-item>
<include src="playlist.wxml">include>
swiper-item>
swiper>
view>
<view <
Original: https://blog.csdn.net/weixin_52112640/article/details/128248335
Author: Chen Mon
Title: 微信小程序——云音乐界面
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/793174/
转载文章受原作者版权保护。转载请注明原作者出处！