需求分析

京东金融首页的需求分析如下:

  • 头部

  • 轮播图

  • 新手特权

  • 极速借贷

  • 理财精选

  • 新品推荐

  • 生活服务

  • 在线客服

  • 公司介绍

  • 导航条

20180308_1953.png

目前,大多数设计稿的尺寸是iPhone5:320*568。

拿到设计稿后,要先做架构:

组件化设计

按钮

俺就可以设计成抽象的组件。

我们要先给它一个默认类名,然后允许传递进来一个自定义的类名,这样就实现继承了;让自定义的类名去覆盖默认的样式,就实现了复用

panel

轮播图

Vue有一些常用的组件,可以直接拿来用,比如vue-awesome-swiper。链接:https://www.npmjs.com/package/vue-awesome-swiper

定义一个抽象的轮播图,然后把轮播图的图片和跳转的url作为参数传递。

css module

这个组件有一个类名,另外一个组件可能还有个同名的,为了防止冲突,可以使用命名空间。

第三方的自适应解决方案

hotcss:https://github.com/imochen/hotcss

results matching ""

    No results matching ""