微信小程序开发之——音乐播放器-音乐推荐

| aspectFit | 保持横纵比缩放图片，使图片的长边能完全显示出来。适用于将图片完整显示出来。例如，详情页的图片 |

| aspectFill | 保持横纵比缩放图片，只保证图片的短边能完全显示出来，长边将会发生截取。适用于容器固定，图片自动缩放的情况，如列表页的缩略图 |

| widthFix | 宽度不变，高度自动变化，保持原图宽高比不变 |

9种裁剪模式

| 裁剪模式 | 说明 |

| :-: | :-: |

| top | 不缩放图片，只显示图片的顶部区域 |

| bottom | 不缩放图片，只显示图片的底部区域 |

| center | 不缩放图片，只显示图片的中间区域 |

| left | 不缩放图片，只显示图片的左边区域 |

| right | 不缩放图片，只显示图片的右边区域 |

| top left | 不缩放图片，只显示图片的左上区域 |

| top right | 不缩放图片，只显示图片的右上区域 |

| bottom left | 不缩放图片，只显示图片的左下区域 |

| bottom right | 不缩放图片，只显示图片的右下区域 |

三 内容区域滚动

---

修改说明

先编写外层的容器，由于这个页面的高度不固定，内容将来可能会增加或减少，因此使用scroll-view组件作为外层容器，当内容高度超过content区域的显示范围后，可以上下滚动

pages/index/info.wxml

已经达到底部

pages/index/index.wxss

.content-info{

height: 100%;

}

::-webkit-scrollbar{

width: 0;

height: 0;

color: transparent;

}

四 轮播图

---

pages/index/info.wxml(先删除测试view)

pages/index/indx.wxss

.content-info-slide{

height: 302rpx;

margin-bottom: 20px;

}

.content-info-slide image{

width: 100%;

height: 100%;

}

五 功能按钮

---

布局文件pages/index/info.wxml(轮播图下方)

私人FM

每日歌曲推荐

云音乐新歌榜

配置文件pages/index/indx.wxss

.content-info-portal{

display: flex;

margin-bottom: 15px;

}

.content-info-portal >view{

flex: 1;

font-size: 11pt;

text-align: center;

}

.content-info-portal image{

width: 120rpx;

height: 120rpx;

display: block;

margin: 20rpx auto;

}

六 热门音乐

---

布局文件 pages/index/info.wxml(功能按钮下方)

推荐歌曲

紫罗兰

五月之歌

菩提树

欢乐颂

安魂曲

摇篮曲

配置文件pages/index/indx.wxss

.content-info-list{

font-size: 11pt;

margin-bottom: 20rpx;

}

分享读者

作者2013年java转到Android开发，在小厂待过，也去过华为，OPPO等大厂待过，18年四月份进了阿里一直到现在。

被人面试过，也面试过很多人。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长，而且极易碰到天花板技术停滞不前！

我们整理了一份阿里P7级别的Android架构师全套学习资料，特别适合有3-5年以上经验的小伙伴深入学习提升。

主要包括阿里，以及字节跳动，腾讯，华为，小米，等一线互联网公司主流架构技术。如果你有需要，尽管拿走好了。

35岁中年危机大多是因为被短期的利益牵着走，过早压榨掉了价值，如果能一开始就树立一个正确的长远的职业规划。35岁后的你只会比周围的人更值钱。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
不成体系的学习效果低效漫长，而且极易碰到天花板技术停滞不前！

我们整理了一份阿里P7级别的Android架构师全套学习资料，特别适合有3-5年以上经验的小伙伴深入学习提升。

主要包括阿里，以及字节跳动，腾讯，华为，小米，等一线互联网公司主流架构技术。如果你有需要，尽管拿走好了。

[外链图片转存中…(img-gKw4qAx3-1715325030218)]

35岁中年危机大多是因为被短期的利益牵着走，过早压榨掉了价值，如果能一开始就树立一个正确的长远的职业规划。35岁后的你只会比周围的人更值钱。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！