「文經(jīng)課表小程序」當(dāng)日課表界面實(shí)現(xiàn)方法

發(fā)布時(shí)間：2018-04-26 12:09 所屬欄目：小程序開發(fā)教程

前言

先簡(jiǎn)單介紹一下「文經(jīng)課表」：基于微信小程序MINA框架的WXML、WXSS、JS為代碼語言進(jìn)行開發(fā)，視圖層采用Flex彈性布局，邏輯層采用模塊化模式開發(fā)。發(fā)布一周累計(jì)用戶人數(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ú)說這個(gè)界面的實(shí)現(xiàn)方法，其實(shí)這與課表數(shù)據(jù)是分不開的。好，裝逼完成，開始說一下當(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)繞，總之這樣寫有利于for循環(huán)出當(dāng)日課表。

因此這樣一個(gè)for循環(huán)出來之后的數(shù)據(jù)是無法使用css選擇器直接控制格式，可以看一下直出后的效果。

所有內(nèi)容都擠在了一行之中，那該怎么辦？這樣也未免太不注重用戶體驗(yàn)了吧？每循環(huán)一次加一個(gè)
總可以了吧？不不不，前言中說了，微信小程序中的代碼語言為WXML、WXSS、JS，這意味著并不是一個(gè)HTML頁面，
標(biāo)簽并不存在。

解決

既然如此，先看一下輸出規(guī)律。每一大節(jié)課包含8個(gè)數(shù)組，數(shù)組內(nèi)包含兩小節(jié)的課程內(nèi)容，第一行的課程內(nèi)容為課題，那么就簡(jiǎn)單了！可以每隔4行將顯示出的標(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)橛辛?nbsp;{{index % 4 == 0}} 和中的 \n 換行符，便能將課題和其他內(nèi)容區(qū)分開來，實(shí)現(xiàn)標(biāo)題突出顯示的功能，看下面效果。

優(yōu)化

emmm...不錯(cuò)，但總感覺看起來找不到關(guān)鍵信息？我們看當(dāng)日課表要看的是什么來著？第幾節(jié)課+上什么課+上課地點(diǎn)，對(duì)吧！

第幾節(jié)課用符合小程序開發(fā)的主題色高亮顯示了，上什么課也用加粗標(biāo)注出來了，那么地點(diǎn)在標(biāo)題下面看起來感覺好累?。∫?yàn)槿搜垡呀?jīng)將目光直接投射在了你所要關(guān)注的點(diǎn)上面了，這些關(guān)鍵點(diǎn)都已經(jīng)用不同的方式凸顯出來方便一眼看到，然而上課地點(diǎn)并沒有安排在合適的地方一眼看到，畢竟這也是所要看到的關(guān)鍵信息之一，因此需要把它也凸顯一下，我們把它放到右邊如何？

用開發(fā)者工具將這一段加上 float: right ，嗯，不錯(cuò)，這樣效果就好多了，突出但不喧賓奪主，符合用戶體驗(yàn)。那么……該怎么實(shí)現(xiàn)？聰明的你一定會(huì)想到剛剛提到的每隔N行加一個(gè)css屬性，不過多個(gè)if可不是好現(xiàn)象，小程序設(shè)計(jì)指南中可是指出小程序要 “減少等待，反饋及時(shí)” ，既然我們的大標(biāo)題已經(jīng)有了Bold屬性，大標(biāo)題的下一行就是上課地點(diǎn)，那能不能在css中動(dòng)一下手腳？