首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

跨平台移动应用开发-期末考试,Coding第四天

记录:2019-11-5 14:06

据前三天的工作,现在共剩下的页面有:推荐列表页、推荐详细页、成长轨迹页、人生阶段列表页、人生阶段详细页和控制台。

让我们先将推荐的列表页先做出来吧。话不多说,开始!

推荐页UI原型图

由原型图可以看出,这个页面除了header和footer部分外,还有两个区块,第一个是一张图片,先设计一张图片吧。由于时间关系,直接上效果图

推荐页的banner

接下来就是列表区块了,这里可以复制首页的推荐列表过来

推荐页的列表

那么,这个页面就已经做好了。最终效果:

推荐页

接下来,就做一下人生阶段页,让我们先回顾一下UI原型图:

人生阶段页UI原型图

这个页面相对来说是非常简单的了,复制 推荐页面的图片区块相关代码,以及首页的人生阶段区块的相关代码即可完成。

人生阶段页

接下来就开始做成长轨迹页了,这个页面需要用到jQueryMobile的折叠块工具,我们先看看UI原型图:

成长轨迹页UI原型图

成长轨迹页同样有一张图片,接下来就是折叠块了,同样复制前面做的两个页面的图片的相关代码即可。然后就是将jQueryMobile折叠块代码加入页面去。

初步的成长轨迹页

临时有点事需要去做,今天就先到这里好了。明天再继续做。

总结:今天做的页面基本上都是复制之前做出来的代码,也比较简单。今天暂时没发现什么坑

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20191105A0HI8D00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券