微信小程序-实现音乐播放页（flex）

音乐小程序播放页自适应布局，tab栏切换

index.wxml

<image class="bg-img" mode="aspectFill" src="{{currentSong.al.picUrl}}"></image>
<view class="bg-cover"></view>
<view class=""><nav-bar><view class="tab" slot="title"><view style="color:{{currentIndex === 0?'white':''}}">歌曲</view><view class="divider">|</view><view style="color:{{currentIndex === 1?'white':''}}" bindtap="handleLyric">歌词</view></view></nav-bar><swiper class="swiper" style="height:{{countHeight}}px" bindchange="handleSwiperChange"><swiper-item class="music"><view class="album"><image class="img"  src="{{currentSong.al.picUrl}}"></image></view><view class="info"><view class="title">{{currentSong.name}}</view><view class="subtitle"><view class="singer"><block wx:for="{{currentSong.ar}}" wx:key="id">  <text v-if="{{currentSong.length !== index+1}}">{{item.name}} /</text><text v-if="{{currentSong.length === index+1}}">{{item.name}}</text></block></view><view class="alias" wx:if="{{currentSong.alia.length}}">专辑：{{currentSong.alia[0]}}</view></view></view><view class="music-lyric">我是歌词，呵呵哈哈哈</view><view class="progress"><slider class="slider" block-size="{{16}}"></slider><view class="time"><view class="current">2:99</view><view class="duration">{{duration}}</view></view></view><view class="option"><image class="btn btn-mode" src="/assets/images/player/play_order.png">  </image><image class="btn btn-prev" src="/assets/images/player/play_prev.png">  </image><image class="btn btn-pause" src="/assets/images/player/play_pause.png">  </image><image class="btn btn-next" src="/assets/images/player/play_next.png">  </image><image class="btn btn-music" src="/assets/images/player/play_music.png">  </image></view></swiper-item><swiper-item class="lyric">2</swiper-item></swiper>
</view>

index.wxss

/* pages/music-player/index.wxss */
page{width: 100%;
}
.bg-img ,.bg-cover{position: fixed;z-index: -1;top:0;left: 0;width: 100%;height: 100%;
}
.bg-cover{background-color: rgba(0,0,0,.5);backdrop-filter: blur(10px);
}
.tab{display: flex;font-size: 28rpx;justify-content: center;color: rgb(209, 202, 202);
}
.divider{margin: 0 20rpx;
}
.music{display: flex;flex-direction: column;box-sizing: border-box;padding:0 40rpx;
}
.album{flex: 7;
}
.album .img{width: 100%;height: 100%;border-radius: 20rpx;
}
.info{color: #fff;
}
.info .title{margin: 20rpx 0;font-size: 36rpx;
}
.info .subtitle{font-size: 28rpx;color: #ccc;line-height: 50rpx;
}
.music-lyric{margin-top: 40rpx;color: #fff;font-size: 32rpx;text-align: center;
}
.time{display: flex;justify-content: space-between;color: #fff;font-size: 28rpx;margin:0 30rpx;
}
.slider{margin: 10rpx;
}
.option{display: flex;flex: 1;justify-content: space-between;align-items: center;padding-bottom: 20rpx;
}
.btn-mode,.btn-music{width: 70rpx;height: 70rpx;
}
.btn-prev,.btn-next{width: 70rpx;height: 70rpx;
}
.btn-pause{width: 140rpx;height: 140rpx;
}

完整项目请移步gitee：https://gitee.com/yue_yue_wang/wymusic

微信小程序-实现音乐播放页（flex）相关推荐

html5音乐播放器设计论文,基于微信小程序的音乐播放器设计和毕业论文
摘要随着通信技术的发展和智能设备的普及,移动互联网在近两年发展迅猛,新兴的移动社交软件"微信"逐渐走进了手机用户的生活,深受全国数亿用户的欢迎.随着微信版本的不断更新,微信也 ...
微信小程序实现音乐播放器（2）
文章目录前情提要 BackgroundAudioManager API:wx.setNavigationBarTitle() 搭建静态资源服务器小程序项目 app.json app.wxss pa ...
微信小程序实现音乐播放器（3）（使用全局数据实现数据共享）
文章目录前情提要搭建静态资源服务器小程序项目 app.json app.js app.wxss pages/index/index.json pages/index/index.wxml pag ...
微信小程序实现音乐播放器（5）
文章目录前情提要 pubsubjs实现页面通信 moment.js实现时间格式化 BackgroundAudioManager 小程序项目 app.json app.wxss app.js page ...
微信小程序之音乐播放
微信小程序之音乐播放这次用的是API中的wx.createInnerAudioContext()接口 (创建内部 audio 上下文 InnerAudioContext 对象.) InnerAudi ...
许嵩音乐智能问答系统微信小程序之音乐播放器
许嵩音乐智能问答系统微信小程序之音乐播放器 - 项目简介项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值连接知识图谱你还 ...
微信小程序入门-音乐播放器
萌新,随便做做,只是了解一下微信小程序,希望可以给看到的胖友一点参考. 之前在网上看到这个人入门四天做完一个,我五天做完了,比他好看,突然有一点自信然后发现自己特别不乐意重新看自己的代码,总觉得写的 ...
【微信小程序】音乐播放器
场景使用微信小程序实现一个简易的音乐播放器:Github地址效果虽然界面很简单,但是一个音频播放器该有的功能大部分都有了(没有歌词显示功能). 主要实现的功能有: 实现音频播放,暂停: 实现拖拽 ...
Java爬虫后台+微信小程序之音乐播放器（上）
微信小程序–音乐播放器(Java爬虫后台在下文篇章公布) 主页面: wxml: css就不展示了,比较多 <view class='container' style='width:{{wid}} ...

微信小程序-实现音乐播放页（flex）

微信小程序-实现音乐播放页（flex）相关推荐

最新文章

热门文章