前言
先簡(jiǎn)單介紹一下「文經(jīng)課表」：基于微信小程序MINA框架的WXML、WXSS、JS為代碼語(yǔ)言進(jìn)行開(kāi)發(fā)，視圖層采用Flex彈性布局，邏輯層采用模塊化模式開(kāi)發(fā)。發(fā)布一周累計(jì)用戶(hù)人數(shù)1000+，煙臺(tái)大學(xué)文經(jīng)學(xué)院、煙臺(tái)大學(xué)文經(jīng)學(xué)院學(xué)生會(huì)等官方微信公眾號(hào)主動(dòng)關(guān)聯(lián)小程序，更多介紹：https://lab.sangsir.com/kb/。
為什么要單獨(dú)說(shuō)這個(gè)界面的實(shí)現(xiàn)方法，其實(shí)這與課表數(shù)據(jù)是分不開(kāi)的。好，裝逼完成，開(kāi)始說(shuō)一下當(dāng)日課表界面的實(shí)現(xiàn)方法。
分析
先看一下我處理的課表數(shù)據(jù)，這是一個(gè)由上到下，由左到右進(jìn)行的分組。每一大節(jié)課為1個(gè)數(shù)組，數(shù)組內(nèi)包含8個(gè)數(shù)組，里面包含星期一到星期日的兩小節(jié)的課程內(nèi)容。嗯，有點(diǎn)繞，總之這樣寫(xiě)有利于for循環(huán)出當(dāng)日課表。
因此這樣一個(gè)for循環(huán)出來(lái)之后的數(shù)據(jù)是無(wú)法使用css選擇器直接控制格式，可以看一下直出后的效果。
所有內(nèi)容都擠在了一行之中，那該怎么辦？這樣也未免太不注重用戶(hù)體驗(yàn)了吧？每循環(huán)一次加一個(gè)
<br>總可以了吧？不不不，前言中說(shuō)了，微信小程序中的代碼語(yǔ)言為WXML、WXSS、JS，意味著這并不是一個(gè)HTML頁(yè)面，<br>標(biāo)簽并不存在。
解決
既然如此，先看一下輸出規(guī)律。每一大節(jié)課包含8個(gè)數(shù)組，數(shù)組內(nèi)包含兩小節(jié)的課程內(nèi)容，第一行的課程內(nèi)容為課題，那么就簡(jiǎn)單了！可以每隔4個(gè)數(shù)組將顯示出的標(biāo)題加一個(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>
因?yàn)橛辛?code>{{index % 4 == 0}}的每隔四行加上bold屬性與<text>中的\n換行符，便能將課題和其他內(nèi)容區(qū)分開(kāi)來(lái)，實(shí)現(xiàn)標(biāo)題突出顯示的功能，看下圖效果。
優(yōu)化
emmm...不錯(cuò)，但總感覺(jué)看起來(lái)找不到關(guān)鍵信息？或者關(guān)鍵信息有些少？我們看當(dāng)日課表要看的是什么來(lái)著？第幾節(jié)課+上什么課+上課地點(diǎn)，對(duì)吧！
第幾節(jié)課用符合小程序開(kāi)發(fā)的主題色高亮顯示了，上什么課也用加粗標(biāo)注出來(lái)了，那么地點(diǎn)在標(biāo)題下面看起來(lái)感覺(jué)好累?。∫?yàn)槿搜垡呀?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，嗯，不錯(cuò)，這樣效果就好多了，突出但不喧賓奪主，符合用戶(hù)體驗(yàn)。那么……該怎么實(shí)現(xiàn)？聰明的你一定會(huì)想到剛剛提到的每隔N行加一個(gè)css屬性，不過(guò)多個(gè)if可不是好現(xiàn)象，小程序設(shè)計(jì)指南中可是指出小程序要“減少等待，反饋及時(shí)”，既然我們的大標(biāo)題已經(jīng)有了bold屬性，大標(biāo)題的下一行就是上課地點(diǎn)，那能不能在css中動(dòng)一下手腳？在翻css手冊(cè)時(shí)我便看到了一個(gè)實(shí)現(xiàn)方法：CSS 相鄰兄弟選擇器
怎么說(shuō)？是不是很有趣？只能說(shuō)我需要把前端方面的手冊(cè)發(fā)送到kindle啃上幾遍。
ok，有了這個(gè)相鄰兄弟選擇器那就簡(jiǎn)單多了，完成之后的效果圖則是前言中的附圖了。
總結(jié)
一入前端深似海，此時(shí)不啃基礎(chǔ)何時(shí)啃，文章干貨不多，更多的是思路，希望以后多挖幾個(gè)坑提升一下自己的技術(shù)。
[圖片上傳失敗...(image-3c5eff-1521116801351)]
