基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果


Posted in Javascript onJanuary 09, 2018

效果图如下所示:

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果 

在线地址: github.czero.cn/fancy 

点击下载安卓apk安装包

源码地址: github.com/czero1995/f…

项目主架构

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果 

使用的库

  • 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文件,且文件体积减少至少一半)

实现细节

媲美原生的页面前进和后退的动画实现:

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果 

指定transition:name

在data中声明默认的进出动画

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果 

在mounted()数据渲染初始化完成之后进行判断

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果 

拿到vuex的状态值

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果 

然后进行判断

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果 

最后将当前的组件名字传给vuex,实现不同的组件进去就有不同的切换动画。

下一页动画

.slide-go-enter-active,
.slide-go-leave-active {
 transition: all .5s;
 opacity: .8;
}
.slide-go-enter,
.slide-go-leave-to {
 transition: all .5s;
 transform: translate3d(100%, 0, 0);
 opacity: .8;
}

返回上一页动画

.slide-back-enter-active,
.slide-back-leave-active {
 transition: all .5s;
}
.slide-back-enter,
.slide-back-leave-to {
 transition: all .5s;
 transform: translate3d(-100%, 0, 0);
}

购物车左滑删除

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果 

v-touch

在css中设置好删除按钮的偏移量

-webkit-transform: translate(-12%, 0);
-webkit-transition: all 0.3s linear;

左右滑方法

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果 

滑动的时候触发select样式,进行绑定

让当前的列表项==购物车的列表,样式会被激活,出现左滑删除

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

注意页面的盒子使用盒子之后会和原生页面出现冲突,导致滑动不流畅

因此,需要在main.js指定默认的滑动方式为横向滑动触发

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果 

订单页面,点击顶部导航和左右滑动进行组件的切换以及动画样式的判断

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果 

也是使用的v-touch组件,实现方式和组件切换类似。 我给每个订单状态的组件一个不同的数字,根据这个数字,判断组件是左滑动的动画还是又滑动的动画

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

总结

以上所述是小编给大家介绍的基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
10个经典的网页鼠标特效代码
Jan 09 #Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 #Javascript
JavaScript实现多重继承的方法分析
Jan 09 #Javascript
webpack多入口文件页面打包配置详解
Jan 09 #Javascript
Vue项目组件化工程开发实践方案
Jan 09 #Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 #Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 #Javascript
You might like
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
AngularJS中transclude用法详解
2016/11/03 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
Python随机生成带特殊字符的密码
2016/03/02 Python
Python作用域用法实例详解
2016/03/15 Python
Python模拟用户登录验证
2017/09/11 Python
Django框架多表查询实例分析
2018/07/04 Python
Python爬取成语接龙类网站
2018/10/19 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
应届生求职信写作技巧
2013/10/24 职场文书
家具促销活动方案
2014/02/16 职场文书
市场营销战略计划书
2014/05/06 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android