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

發(fā)表時間：2021-3-31

發(fā)布人：葵宇科技

瀏覽次數(shù)：46

前言

先簡單介紹一下「文經(jīng)課表」：基于微信小程序MINA框架的WXML、WXSS、JS為代碼語言進(jìn)行開發(fā)，視圖層采用Flex彈性布局，邏輯層采用模塊化模式開發(fā)。發(fā)布一周累計用戶人數(shù)1000+，煙臺大學(xué)文經(jīng)學(xué)院、煙臺大學(xué)文經(jīng)學(xué)院學(xué)生會等官方微信公眾號主動關(guān)聯(lián)小程序，更多介紹：https://lab.sangsir.com/kb/ 。

為什么要單獨(dú)說這個界面的實(shí)現(xiàn)方法，其實(shí)這與課表數(shù)據(jù)是分不開的。好，裝逼完成，開始說一下當(dāng)日課表界面的實(shí)現(xiàn)方法。

分析

先看一下我處理的課表數(shù)據(jù)，這是一個由上到下，由左到右進(jìn)行的分組。每一大節(jié)課為1個數(shù)組，數(shù)組內(nèi)包含8個數(shù)組，里面包含星期一到星期日的兩小節(jié)的課程內(nèi)容。嗯，有點(diǎn)繞，總之這樣寫有利于for循環(huán)出當(dāng)日課表。

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

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

解決

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

優(yōu)化

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

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

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

在翻css手冊時我便看到了一個有趣的實(shí)現(xiàn)方法： CSS 相鄰兄弟選擇器