入門課程第一周

• • 基礎(chǔ)
  • • 如何看幫助文檔
    • • API幫助
      • 控件幫助
      • 設(shè)計(jì)器使用幫助及反饋
    • 舉個(gè)例子
  • 附加
  • • 目標(biāo)
    • 架構(gòu)
    • • 范進(jìn)中舉
      • 相冊
      • 其他

基礎(chǔ)

只需要按照視頻里面就可以做到90%。但是，dotIndicator 是點(diǎn)指示器控件需要自己研究一下。使用幫助文檔非常有必要看，研究了好一會(huì)才知道如何看幫助文檔。

代碼下載
基礎(chǔ)作業(yè)
附加作業(yè)

如何看幫助文檔

幫助文檔分為三塊

API幫助

控件幫助

設(shè)計(jì)器使用幫助及反饋

API幫助

這部分主要是觸發(fā)的時(shí)候來找，比如按鍵，觸發(fā)時(shí)候是什么樣子的，值是多少之類的。

控件幫助

這部分主要是控件的屬性之類的，就是拖到顯示的東西叫控件，可以在這里面找setData 功能因?yàn)閁I交互設(shè)計(jì)主要是設(shè)置值的變化。

設(shè)計(jì)器使用幫助及反饋

主要教UI的操作，應(yīng)該先看這個(gè)，再看其他的。

舉個(gè)例子

本次視頻中沒有代碼的dotIndicator 是點(diǎn)指示器控件。

目標(biāo)：實(shí)現(xiàn)點(diǎn)的切換

控件幫助 中 找到 setData

示例代碼注解

this.setData({dotIndicator1 : 1})	將 id 為 dotIndicator1 的 DotIndicator 控件的選中點(diǎn)置為 1，即第2個(gè)點(diǎn)
this.setData({dotIndicator1 : {value : 1}})	將 id 為 dotIndicator1 的 DotIndicator 控件的選中點(diǎn)置為 1，即第2個(gè)點(diǎn)

這里的數(shù)字就是切換的點(diǎn)，在代碼中進(jìn)行改變這個(gè)值就能達(dá)到實(shí)現(xiàn)點(diǎn)切換的目的。所以本次基礎(chǔ)課程中，只需要在card變換函數(shù)里面將card 數(shù)值用setdata就可實(shí)現(xiàn)card變化時(shí)點(diǎn)也跟著一起變化

附加

目標(biāo)

• 實(shí)現(xiàn)點(diǎn)擊范進(jìn)中舉 右邊部分展示可滑動(dòng)文本
• 點(diǎn)擊相冊 右邊可滑動(dòng)照片
• 點(diǎn)擊其他 展示個(gè)人設(shè)計(jì)部分

架構(gòu)

上來就映進(jìn)眼簾的這畫面要切換，我只會(huì)用 card 這個(gè)東西了，我在幫助手冊怎么也沒找到能跳轉(zhuǎn)panl的東西，好像是存在的，不過那樣也過于復(fù)雜了。現(xiàn)在用card 下面放3個(gè)panl 點(diǎn)擊按鍵時(shí)候切換card 值就實(shí)現(xiàn)了畫面的切換。card可選擇滑動(dòng)方向

范進(jìn)中舉

card第一個(gè)panl 用來放文本，選擇的是MultiTextBox，把高度調(diào)很大就能放下很多文本并且自己有滑動(dòng)功能。但是！我的就是不能滑動(dòng)，并且和card滑動(dòng)手勢還要奇妙的沖突。在群中大佬指點(diǎn)，panl方放listctrl ，listctrl下放文本就可以進(jìn)行滑動(dòng)了，事實(shí)確實(shí)如此。

讓我想起了以前玩的觸屏學(xué)習(xí)機(jī)，也就是這個(gè)功能，那么我們選點(diǎn)好看圖標(biāo)就好了，本次選用的黑白圖標(biāo)，按鈕按下去的圖片是黑白反色。文本背景色是在中國傳統(tǒng)色選擇的比較暗的顏色，保護(hù)視力。

相冊

在card下第二個(gè)panl再放置個(gè)card即可，同時(shí)，我也在下面加了點(diǎn)指示，背景也是從中國傳統(tǒng)色選擇的。展示照片選了幾個(gè)而已。

• 宇航員外太空正拿著小王子的那朵玫瑰花，推薦圖書“小王子”
• 亞瑟王saber石中劍
• 氣功時(shí)代

其他

js剛剛了解一點(diǎn)，難的不知道怎么實(shí)現(xiàn)。所以做了還算有點(diǎn)意思東西。

無聊盒子

分為上下兩個(gè)部分

永遠(yuǎn)無法全開的按鈕

逗你玩音量設(shè)置

顧名思義，無法全開的按鈕就是無法全打開，開了一個(gè)其他的關(guān)掉了，逗你玩音量設(shè)置，靈感取自音量設(shè)計(jì)大賽，那些暫時(shí)不知道js如何實(shí)現(xiàn)，這些很適合打發(fā)時(shí)間，所以叫無聊盒子。

總結(jié)

以上是生活随笔為你收集整理的柿饼UI入门课程第一周作业的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。