柿饼UI入门课程第一周作业

入门课程第一周

基础
- 如何看帮助文档
- - API帮助
  - 控件帮助
  - 设计器使用帮助及反馈
- 举个例子
附加
- 目标
- 架构
- - 范进中举
  - 相册
  - 其他

基础

只需要按照视频里面就可以做到90%。但是，dotIndicator 是点指示器控件需要自己研究一下。使用帮助文档非常有必要看，研究了好一会才知道如何看帮助文档。

代码下载
基础作业
附加作业

如何看帮助文档

帮助文档分为三块

API帮助
控件帮助
设计器使用帮助及反馈

API帮助

这部分主要是触发的时候来找，比如按键，触发时候是什么样子的，值是多少之类的。

控件帮助

这部分主要是控件的属性之类的，就是拖到显示的东西叫控件，可以在这里面找setData 功能因为UI交互设计主要是设置值的变化。

设计器使用帮助及反馈

主要教UI的操作，应该先看这个，再看其他的。

举个例子

本次视频中没有代码的dotIndicator 是点指示器控件。

目标：实现点的切换

控件帮助 中找到 setData

示例代码	注解
`this.setData({dotIndicator1 : 1})`	将 `id` 为 `dotIndicator1` 的 DotIndicator 控件的选中点置为 1，即第2个点
`this.setData({dotIndicator1 : {value : 1}})`	将 `id` 为 `dotIndicator1` 的 DotIndicator 控件的选中点置为 1，即第2个点

这里的数字就是切换的点，在代码中进行改变这个值就能达到实现点切换的目的。所以本次基础课程中，只需要在card变换函数里面将card 数值用setdata就可实现card变化时点也跟着一起变化

附加

目标

实现点击范进中举右边部分展示可滑动文本
点击相册右边可滑动照片
点击其他展示个人设计部分

架构

上来就映进眼帘的这画面要切换，我只会用 card 这个东西了，我在帮助手册怎么也没找到能跳转panl的东西，好像是存在的，不过那样也过于复杂了。现在用card 下面放3个panl 点击按键时候切换card 值就实现了画面的切换。card可选择滑动方向

范进中举

card第一个panl 用来放文本，选择的是MultiTextBox，把高度调很大就能放下很多文本并且自己有滑动功能。但是！我的就是不能滑动，并且和card滑动手势还要奇妙的冲突。在群中大佬指点，panl方放listctrl ，listctrl下放文本就可以进行滑动了，事实确实如此。

让我想起了以前玩的触屏学习机，也就是这个功能，那么我们选点好看图标就好了，本次选用的黑白图标，按钮按下去的图片是黑白反色。文本背景色是在中国传统色选择的比较暗的颜色，保护视力。

相册

在card下第二个panl再放置个card即可，同时，我也在下面加了点指示，背景也是从中国传统色选择的。展示照片选了几个而已。

宇航员外太空正拿着小王子的那朵玫瑰花，推荐图书“小王子”
亚瑟王saber石中剑
气功时代

其他

js刚刚了解一点，难的不知道怎么实现。所以做了还算有点意思东西。

无聊盒子

分为上下两个部分

永远无法全开的按钮

逗你玩音量设置

顾名思义，无法全开的按钮就是无法全打开，开了一个其他的关掉了，逗你玩音量设置，灵感取自音量设计大赛，那些暂时不知道js如何实现，这些很适合打发时间，所以叫无聊盒子。