本系列将会用 vue.js2 制作一个移动端的 webapp 单页面,页面不多,大概在 7,8 个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到。CSS 方面也会有一些描述,像不同分辨率的适配,flex 布局以及 scss 来编写 mixin 来处理 2x,3x 图等。
通过 vue-cli 安装 webpack 模板后,会自动生成一大堆文件,通常我们只关心 src / 目录下的东西。
个人习惯在 src 下新建一个 base 目录,用来存放通用的 css 及 js,比如样式重置 css,一切 js 工具函数。
下载好文件后,npm run dev
启动服务你就会看到熟悉的 hello vue。由于我们做的是移动端的页面,所以把 chrome 切换到手机模式(打开开发工具,ctrl+shift+m 或者点左上角那个手机)
对于移动端如何适配不同的手机屏幕,估计每个人都有自己的做法,我用的是淘宝的 flexible.js,根据不同类型来缩放以及调整 html 字体的大小,用 rem 来布局。使用的方法也很简单,只需要引入 Js 文件就可以了,github 地址。
- 这里简单介绍一下如何计算rem:
- 假如设计稿为640,
- 有一个div宽200px,则css应该为width: (200 / 640) * 10 = 3.125rem假如设计稿为750,
- 有一个div宽200px,则css应该为width: (200 / 750) * 10 = 2.666rem
可以发现如果每次量好一个 DIV 宽后都要用一个计算器算一遍,那这速度也太慢了。
假如你用的是 scss,那么可以编写一个函数来处理 (函数下面的 75px 来自设计稿大小,假如设计稿为 750,则为 75;)
- @
- function torem($px) {@
- return $px / 75px * 1rem;
- }
假如你用的 sublime 编辑器, 可以到 https://github.com/flashlizi/cssrem 下载一个插件,写起来更方便;
字体方面我们仍然用 px 来写,不过需要针对不同的缩放比例写不用的大小,比如安卓下,字体大小为 14px, 那么 iphone6 下大小应为 28,Iphone6s 应为 42px。flexible.js 会根据屏幕缩放比给 html 添加 data-dpr 属性,因此可以通过 scss 编写 mixin 来处理字体
- @mixin fz($font - size) {
- font - size: $font - size; [data - dpr = "2"] & {
- font - size: $font - size * 2;
- } [data - dpr = "3"] & {
- font - size: $font - size * 3;
- }
- }
需要用到字体的地方,
;
- @include fz(16px)
通常为了适应 retain 和非 retain 屏幕,我们会准备不同的图片大小,也就是 2x 和 3x 图,我的做法是 [data-dpr="3"] 下使用 3x 图,其他情况统一使用 2X 图。
在为了方便,编写一个 mixin 来处理:(假设放在 2x 文件夹和 3x 文件夹下)
- @mixin dpr - img($url, $name, $type: ".jpg") {
- background - image: url($url + "2x/" + $name + "@2x" + $type); [data - dpr = "3"] & {
- background - image: url($url + "3x/" + $name + "@3x" + $type);
- }
- }
第一个参数为 2x,3x 文件夹所在路径,第二个参数为文件名,第三个参数为文件类型,默认为. jpg 结尾。
写 CSS 时有些代码块可能会经常用到,因此也可以写成 mixin,比如
:
- 单行文本溢出和多行文本溢出
- @mixin t - overflow($line: 1) {@
- if $line == 1 {
- overflow: hidden;
- text - overflow: ellipsis;
- white - space: nowrap;
- }@
- else {
- display: -webkit - box; - webkit - line - clamp: $line; - webkit - box - orient: vertical;
- overflow: hidden;
- text - overflow: ellipsis;
- }
- }
比如
:
- 左右垂直居中
- @mixin table - center {
- display: table - cell;
- vertical - align: middle;
- text - align: center;
- }
- @mixin flex - center {
- display: flex;
- justify - content: center;
- align - items: center;
- }
页面通常都会有很多小图标,为了减少请求以前可能会用雪碧图来合并,不过我现在基本不用了,用字体图标来代替。我用的是阿里的在线字体图标,上传 svg 到阿里字体库或者直接使用阿里的图标,选中图标后添加到项目,生成地址后,import 到项目中就可已使用了。
- @import url('//at.alicdn.com/t/font_nfzwlroyg2vuz0k9.css');
页面上底部有 4 个 tab,点击时会切换对应的组件,所以 Main 组件的结构是这样的
- <template>
- <div>
- <router-view>
- </router-view>
- <foot-nav>
- </foot-nav>
- </div>
- </template>
- <template>
- <div class="foot-nav-containner">
- <ul class="bottom-nav">
- <router-link tag="li" to='/index' class="bottom-nav__li iconfont icon-shouye bottom-nav__li--home">
- </router-link>
- <router-link tag="li" to='/search' class="bottom-nav__li iconfont icon-ss bottom-nav__li--search">
- </router-link>
- <router-link tag="li" to='/car' class="bottom-nav__li iconfont icon-shoppingcart bottom-nav__li--car">
- </router-link>
- <router-link tag="li" to='/vip' class="bottom-nav__li iconfont icon-gerenzhongxinxia bottom-nav__li--vip">
- </router-link>
- </ul>
- </div>
- </template>
点击底部每个导航,导航上面的组件都会相应的替换。不过要注意点击
时,购物车页面底部需要有去结算按钮,所以购物车页面是没有导航的,也就是说
- 购物车
。
- 购物车的路由配置时不会放在mian路由的children下面
- {
- path: '/',
- redirect: "/home"
- },
- {
- path: '/home',
- component: Main,
- children: [{
- path: '/',
- redirect: "/index"
- },
- {
- path: '/index',
- component: Index
- },
- {
- path: '/search',
- component: Search
- },
- {
- path: '/vip',
- component: Vip
- }]
- },
- {
- path: '/car',
- component: Car
- }
- 我们把home路由设置为默认路由,当路由为空时,就会重定向到home路由,home路由下又把index路由设置为默认路由。我们把car设为单独的路由而不是home下,因此点击导航的购物车时就会从home路由切换到car路由,而由于底部的路由是放置在home路由下,所以到了购物车页面导航也就不存在了,这样基本的配置就差不多完成了。
来源: http://www.cnblogs.com/zhengrunlin/p/7226463.html