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

来自CloudWiki
跳转至： 导航， 搜索
（创建空白页面）
 
第1行： 第1行：
 +
==任务分析==
 +
音乐推荐是显示在content区域中的一个标签页，
  
 +
其页面内容由三部分组成，分别是轮播图、功能按钮和热门音乐。
 +
 +
由于content区域的可显示高度是有限的，而音乐推荐中的实际内容可能会超过显示区域的高度，
 +
 +
因此在<nowiki><swiper-item></nowiki>标签内使用了scroll-view组件，用于实现内容的上下滚动。
 +
 +
==前导知识==
 +
===scroll-view===
 +
用于实现可滚动视图区域
 +
 +
scroll-y属性即可实现纵向滚动。需要注意的是，纵向滚动需要在样式中为<scroll-view>设置一个固定高度，否则会被子元素撑大。
 +
 +
例：
 +
 +
test4.wxml:
 +
 +
<nowiki>
 +
<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></nowiki>
 +
 +
test4.js:
 +
 +
<nowiki>
 +
scroll: function(e) {
 +
    console.log(e.detail)
 +
  },
 +
</nowiki>
 +
 +
scroll-view组件设置了允许横向和纵向滚动，当发生滚动时就会发生执行事件处理函数scroll
 +
 +
注意：scroll-view内的组件宽度或高度大于scroll-view组件本身时，才会由滚动发生
 +
 +
[[文件:wexin21081607.png|600px]]

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

任务分析

音乐推荐是显示在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组件本身时，才会由滚动发生

Wexin21081607.png

取自“http://www.openbrains.net/mediawiki/index.php?title=%22音乐%22小程序：音乐推荐&oldid=27968”