“"音乐"小程序：音乐推荐”的版本间的差异

2021年8月16日 (一) 12:58的版本

任务分析

音乐推荐是显示在content区域中的一个标签页，

其页面内容由三部分组成，分别是轮播图、功能按钮和热门音乐。

由于content区域的可显示高度是有限的，而音乐推荐中的实际内容可能会超过显示区域的高度，

因此在<swiper-item>标签内使用了scroll-view组件，用于实现内容的上下滚动。

前导知识

scroll-view

用于实现可滚动视图区域

scroll-y属性即可实现纵向滚动。需要注意的是，纵向滚动需要在样式中为<scroll-view>设置一个固定高度，否则会被子元素撑大。

例：

test4.wxml:

<scroll-view scroll-x scroll-y style="height:200px;background:#ccc" bindscroll="scroll">
      <view style="width:200%;height:400px;"></view>
      <view>The end</view>
</scroll-view>

test4.js:

scroll: function(e) {
    console.log(e.detail)
  },

scroll-view组件设置了允许横向和纵向滚动，当发生滚动时就会发生执行事件处理函数scroll

注意：scroll-view内的组件宽度或高度大于scroll-view组件本身时，才会由滚动发生

image组件

image组件的默认宽高为300px * 225px，

且image组件中的二维码图片不支持长按识别

缩放模式

• scaleToFill 不保持纵横比例缩放图片，使图片的高度完全拉伸至填满image元素

       此模式是缩放的默认模式，缺省时，小程序以此模式来缩放图片

• aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来

       也就是说，可以完整地将图片显示出来

• aspectFill 保持横纵比缩放图片，只保证图片的短边能完全显示出来

        也就是说，图片通常只在水平或垂直方向是完整的，另一方向将会发生截取

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

————————————————

原文链接：https://blog.csdn.net/Mikowoo007/article/details/84329630

裁剪模式

• top 不缩放图片，只显示图片的顶部区域
• bottom 不缩放图片，只显示图片的底部区域
• center 不缩放图片，只显示图片的中间区域
• left 不缩放图片，只显示图片的左边区域
• right 不缩放图片，只显示图片的右边区域
• top left 不缩放图片，只显示图片的左上角区域
• top right 不缩放图片，只显示图片的右上角区域
• bottom left 不缩放图片，只显示图片的左下角区域
• bottom right 不缩放图片，只显示图片的右下角区域

内容区域滚动