基于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 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
js实现鼠标拖曳效果
Dec 30 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 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内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
Python切片索引用法示例
2018/05/15 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
python如何支持并发方法详解
2020/07/25 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
介绍一下gcc特性
2012/01/20 面试题
中英文自我评价语句
2013/12/20 职场文书
中国文明网签名寄语
2014/01/18 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
保安岗位职责
2014/02/21 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
道歉情书大全
2015/05/12 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
Java实现学生管理系统(IO版)
2022/02/24 Java/Android