前言
先簡(jiǎn)單介紹一下「文經(jīng)課表」：基于微信小程序MINA框架的WXML、WXSS、JS為代碼語(yǔ)言進(jìn)行開(kāi)發(fā)，視圖層采用Flex彈性布局，邏輯層采用模塊化模式開(kāi)發(fā)。發(fā)布一周累計用戶(hù)人數1000+，煙臺大學(xué)文經(jīng)學(xué)院、煙臺大學(xué)文經(jīng)學(xué)院學(xué)生會(huì )等官方微信公眾號主動(dòng)關(guān)聯(lián)小程序，更多介紹： http://lab.sangsir.com/kb/ 。
為什么要單獨說(shuō)這個(gè)界面的實(shí)現方法，其實(shí)這與課表數據是分不開(kāi)的。好，裝逼完成，開(kāi)始說(shuō)一下當日課表界面的實(shí)現方法。
分析
先看一下我處理的課表數據，這是一個(gè)由上到下，由左到右進(jìn)行的分組。每一大節課為1個(gè)數組，數組內包含8個(gè)數組，里面包含星期一到星期日的兩小節的課程內容。嗯，有點(diǎn)繞，總之這樣寫(xiě)有利于for循環(huán)出當日課表。
因此這樣一個(gè)for循環(huán)出來(lái)之后的數據是無(wú)法使用css選擇器 直接控制 格式，可以看一下直出后的效果。
所有內容都擠在了一行之中，那該怎么辦？這樣也未免太不注重用戶(hù)體驗了吧？每循環(huán)一次加一個(gè) <br>
總可以了吧？不不不，前言中說(shuō)了，微信小程序中的代碼語(yǔ)言為WXML、WXSS、JS，這意味著(zhù)并不是一個(gè)HTML頁(yè)面， <br>
標簽并不存在。
解決
既然如此，先看一下輸出規律。每一大節課包含8個(gè)數組，數組內包含兩小節的課程內容，先進(jìn)行的課程內容為課題，那么就簡(jiǎn)單了！可以每隔4行將顯示出的標題加一個(gè)bold屬性進(jìn)行突出顯示。
<block wx:if="{{i[index][k]!==null}}">
<text class="weui-media-box__Bold" wx:if="{{index % 4 == 0}}">
{{i[index][k]}}\n
</text>
<text wx:else>
{{i[index][k]}}\n
</text>
</block>
因為有了 {{index % 4 == 0}}
和 <text>
中的 \n
換行符，便能將課題和其他內容區分開(kāi)來(lái)，實(shí)現標題突出顯示的功能，看下面效果。
優(yōu)化
emmm...不錯，但總感覺(jué)看起來(lái)找不到關(guān)鍵信息？我們看當日課表要看的是什么來(lái)著(zhù)？第幾節課+上什么課+上課地點(diǎn)，對吧！
第幾節課用符合小程序開(kāi)發(fā)的主題色高亮顯示了，上什么課也用加粗標注出來(lái)了，那么地點(diǎn)在標題下面看起來(lái)感覺(jué)好累??！因為人眼已經(jīng)將目光直接投射在了你所要關(guān)注的點(diǎn)上面了，這些關(guān)鍵點(diǎn)都已經(jīng)用不同的方式凸顯出來(lái)方便一眼看到，然而上課地點(diǎn)并沒(méi)有安排在合適的地方一眼看到，畢竟這也是所要看到的關(guān)鍵信息之一，因此需要把它也凸顯一下，我們把它放到右邊如何？
用開(kāi)發(fā)者工具將這一段加上 float: right
，嗯，不錯，這樣效果就好多了，突出但不喧賓奪主，符合用戶(hù)體驗。那么……該怎么實(shí)現？聰明的你一定會(huì )想到剛剛提到的每隔N行加一個(gè)css屬性，不過(guò)多個(gè)if可不是好現象，小程序設計指南中可是指出小程序要 “減少等待，反饋及時(shí)”
，既然我們的大標題已經(jīng)有了Bold屬性，大標題的下一行就是上課地點(diǎn)，那能不能在css中動(dòng)一下手腳？
在翻css手冊時(shí)我便看到了一個(gè)有趣的實(shí)現方法： CSS 相鄰兄弟選擇器
怎么說(shuō)？是不是很有趣？只能說(shuō)一入前端深似海啊，我需要把html/css/js的手冊發(fā)送到kindle啃上幾遍。
ok，有了這個(gè) 相鄰兄弟選擇器 那就簡(jiǎn)單多了，完成之后的效果圖則是前言中的附圖了。
總結
一入前端深似海，此時(shí)不啃基礎何時(shí)啃，文章干貨不多，希望以后多挖幾個(gè)坑提升一下自己的技術(shù)。
「文經(jīng)課表」Github源碼： 
本文由SangSir 創(chuàng )作，采用 知識共享署名4.0 國際許可協(xié)議進(jìn)行許可
本站文章除注明轉載/出處外，均為本站原創(chuàng )或翻譯，轉載前請務(wù)必署名
