在线考试系统微信小程序的实现(一)

首页需要一个轮播图(放点心灵鸡汤),再着是一个长条里面包含有当前日期和答题大致情况。然后是答题的几个科目,点击进入对应的科目答题。底部一个导航栏,测试及复习两个栏,测试显示的页面即为上述页面,复习的界面后面再说。

首先完成静态页面的布局,再考虑逻辑。由于是边看前端教程和其他类型小程序的实战视频,所以做起来不熟练,会碰到问题,在这里记录下。

在线考试系统微信小程序的实现(一)_第1张图片

这是已经做好的,轮播图去文档找现成的代码,换下图片,调整下就ok;

底部的tabbar也蛮容易,也有文档。

中间部分就需要注意几个view的层次啊,间距啊,排布什么的。下面记录下实践过程中才知道的。

今日刷题部分是由6个view组成的,总的占整个父view的65%,分布时把每个view的宽设成父view的⅓,高½,再设置弹性方位是row,即flex-direction:row; 然后flex-wrap:wrap; 是可以换行就可以了。

下面的答题入口部分,只有前面两个选项有下边框,这个只需要给第三个view设置一个ID,在给该ID选择器设置下无边框就好,ID选择器的权重最大噻。

这部分也是嵌套了盒子,然后先开始出了好多毛病,就是没达到预期效果,我也忘记记录具体问题了,反正最后写的也没啥难度,没啥特殊的,就是那个图片icon我还没想到/查到比较好的方法按比例缩小显示,我是直接定义了大小了,然后定义了外边距,让文字左浮动显得整齐。

也没啥好写的了,叽哩哇啦弄了好久,最后出来的确实不难,嗨呀 = = 下面的页面就好写了,主要是事件难写啊,到时候页面的元素肯定也会有变化,继续看吧~

你可能感兴趣的:(在线考试系统微信小程序的实现(一))