欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

「文经课表」当日课表界面实现方法

发表日期:2019-10 文章编辑:小灯 浏览次数:150

前言

先简单介绍一下「文经课表」:基于微信小程序MINA框架的WXML、WXSS、JS为代码语言进行开发,视图层采用Flex弹性布局,逻辑层采用模块化模式开发。发布一周累计用户人数1000+,烟台大学文经学院、烟台大学文经学院学生会等官方微信公众号主动关联小程序,更多介绍:https://lab.sangsir.com/kb/

为什么要单独说这个界面的实现方法,其实这与课表数据是分不开的。好,装逼完成,开始说一下当日课表界面的实现方法。

分析


先看一下我处理的课表数据,这是一个由上到下,由左到右进行的分组。每一大节课为1个数组,数组内包含8个数组,里面包含星期一到星期日的两小节的课程内容。嗯,有点绕,总之这样写有利于for循环出当日课表。
因此这样一个for循环出来之后的数据是无法使用css选择器直接控制格式,可以看一下直出后的效果。

所有内容都挤在了一行之中,那该怎么办?这样也未免太不注重用户体验了吧?每循环一次加一个<br>总可以了吧?不不不,前言中说了,微信小程序中的代码语言为WXML、WXSS、JS,意味着这并不是一个HTML页面,<br>标签并不存在。

解决

既然如此,先看一下输出规律。每一大节课包含8个数组,数组内包含两小节的课程内容,第一行的课程内容为课题,那么就简单了!可以每隔4个数组将显示出的标题加一个bold属性进行突出显示。

<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}}的每隔四行加上bold属性与<text>中的\n换行符,便能将课题和其他内容区分开来,实现标题突出显示的功能,看下图效果。

优化

emmm...不错,但总感觉看起来找不到关键信息?或者关键信息有些少?我们看当日课表要看的是什么来着?第几节课+上什么课+上课地点,对吧!
第几节课用符合小程序开发的主题色高亮显示了,上什么课也用加粗标注出来了,那么地点在标题下面看起来感觉好累啊!因为人眼已经将目光直接投射在了你所要关注的点上面了,这些关键点都已经用不同的方式凸显出来方便一眼看到,然而上课地点并没有安排在合适的地方一眼看到,毕竟这也是所要看到的关键信息之一,因此需要把它也凸显一下,我们把它放到右边如何?

用开发者工具将这一段加上float: right,嗯,不错,这样效果就好多了,突出但不喧宾夺主,符合用户体验。那么……该怎么实现?聪明的你一定会想到刚刚提到的每隔N行加一个css属性,不过多个if可不是好现象,小程序设计指南中可是指出小程序要“减少等待,反馈及时”,既然我们的大标题已经有了bold属性,大标题的下一行就是上课地点,那能不能在css中动一下手脚?
在翻css手册时我便看到了一个实现方法:CSS 相邻兄弟选择器

怎么说?是不是很有趣?只能说我需要把前端方面的手册发送到kindle啃上几遍。
ok,有了这个相邻兄弟选择器那就简单多了,完成之后的效果图则是前言中的附图了。

总结

一入前端深似海,此时不啃基础何时啃,文章干货不多,更多的是思路,希望以后多挖几个坑提升一下自己的技术。


本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户参考了本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:http://www.dengtar.com/24387.html
将文章分享到..
相关小程序
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.