效果图如下所示：
在线地址: github.czero.cn/fancy
点击下载安卓apk安装包
源码地址: github.com/czero1995/f…
项目主架构
使用的库
vue-cli (vue+webpack脚手架)
vue-router(路由跳转)
vuex(状态管理)
axios(数据请求)
mock.js(模拟后台数据)
vue-touch(手势判断)
fastclick(解决移动端浏览器 300 毫秒点击延迟问题)
vue-lazyload(图片懒加载)
swiper(轮播)
设计布局:
将页面的固定布局 position:fixed (比如Header,Footer)全部改为绝对布 局position:absolute ;
因为fixed会出现莫名其妙的兼容性问题，比如在ios11或ios8下会失效，输入框软键盘激活之后会把底部的固定定位弹出去，导致布局错乱。
用absolute实现fixed细节可以参考这篇
HTML5
CSS3
Less
rem(阿里用的那套rem算法)
Flex(弹性布局)
vue-touch(用于实现购物车左滑删除功能) *动画（vue原生transition实现原生app的效果）
数据请求：
Mock(模拟后台数据)
Axios(请求数据)
逻辑交互：
vue(数据渲染,各个组件间的数值传递)
vue-router(组件间的路由跳转)
vuex(全局状态的管理)
优化方案:
腾讯智图(压缩图片，减少图片的体积)
vue-lazyload(图片懒加载，缓解加载数据,提高网页性能)
fastclick(解决移动端300ms延迟，提高页面交互流畅度)
vue-rouer(路由懒加载,分离app的js为多个js文件，到对应的页面再执行对应的js)
webpack(config/index.js文件内的productionSourceMap改为false,这样打包出来的文件可以没有.map结尾的js文件，且文件体积减少至少一半)
实现细节
媲美原生的页面前进和后退的动画实现:
指定transition:name
在data中声明默认的进出动画
在mounted()数据渲染初始化完成之后进行判断
拿到vuex的状态值
然后进行判断
