| aspectFit | 保持横纵比缩放图片,使图片的长边能完全显示出来。适用于将图片完整显示出来。例如,详情页的图片 |
| aspectFill | 保持横纵比缩放图片,只保证图片的短边能完全显示出来,长边将会发生截取。适用于容器固定,图片自动缩放的情况,如列表页的缩略图 |
| widthFix | 宽度不变,高度自动变化,保持原图宽高比不变 |
9种裁剪模式
| 裁剪模式 | 说明 |
| :-: | :-: |
| top | 不缩放图片,只显示图片的顶部区域 |
| bottom | 不缩放图片,只显示图片的底部区域 |
| center | 不缩放图片,只显示图片的中间区域 |
| left | 不缩放图片,只显示图片的左边区域 |
| right | 不缩放图片,只显示图片的右边区域 |
| top left | 不缩放图片,只显示图片的左上区域 |
| top right | 不缩放图片,只显示图片的右上区域 |
| bottom left | 不缩放图片,只显示图片的左下区域 |
| bottom right | 不缩放图片,只显示图片的右下区域 |
修改说明
先编写外层的容器,由于这个页面的高度不固定,内容将来可能会增加或减少,因此使用scroll-view组件作为外层容器,当内容高度超过content区域的显示范围后,可以上下滚动
pages/index/info.wxml
已经达到底部

本文介绍了微信小程序开发中音乐播放器的实现,包括9种裁剪模式的应用,内容区域滚动、轮播图及功能按钮的布局。通过示例代码展示如何在info.wxml和indx.wxss中进行配置,打造一个具备推荐音乐功能的界面。适合小程序开发者参考学习。
最低0.47元/天 解锁文章
6560

被折叠的 条评论
为什么被折叠?



