vue如何使用原生js写动画效果_基于Vue、Vuex、Vuerouter实现的购物商城(原生切换动画)效果...

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

效果图如下所示&＃xff1a;

在线地址:

点击下载安卓apk安装包

源码地址:

项目主架构

使用的库

vue-cli (vue&＃43;webpack脚手架)

vue-router(路由跳转)

vuex(状态管理)

axios(数据请求)

mock.js(模拟后台数据)

vue-touch(手势判断)

fastclick(解决移动端浏览器 300 毫秒点击延迟问题)

vue-lazyload(图片懒加载)

swiper(轮播)

设计布局:

将页面的固定布局 position:fixed (比如Header,Footer)全部改为绝对布 局position:absolute ;

因为fixed会出现莫名其妙的兼容性问题&＃xff0c;比如在ios11或ios8下会失效&＃xff0c;输入框软键盘激活之后会把底部的固定定位弹出去&＃xff0c;导致布局错乱。

用absolute实现fixed细节可以参考这篇

HTML5

CSS3

Less

rem(阿里用的那套rem算法)

Flex(弹性布局)

vue-touch(用于实现购物车左滑删除功能) *动画(vue原生transition实现原生app的效果)

数据请求&＃xff1a;

Mock(模拟后台数据)

Axios(请求数据)

逻辑交互&＃xff1a;

vue(数据渲染,各个组件间的数值传递)

vue-router(组件间的路由跳转)

vuex(全局状态的管理)

优化方案:

腾讯智图(压缩图片&＃xff0c;减少图片的体积)

vue-lazyload(图片懒加载&＃xff0c;缓解加载数据,提高网页性能)

fastclick(解决移动端300ms延迟&＃xff0c;提高页面交互流畅度)

vue-rouer(路由懒加载,分离app的js为多个js文件&＃xff0c;到对应的页面再执行对应的js)

webpack(config/index.js文件内的productionSourceMap改为false,这样打包出来的文件可以没有.map结尾的js文件&＃xff0c;且文件体积减少至少一半)

实现细节

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

指定transition:name

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

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

拿到vuex的状态值

然后进行判断

最后将当前的组件名字传给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);

}

购物车左滑删除

v-touch

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

-webkit-transform: translate(-12%, 0);

-webkit-transition: all 0.3s linear;

左右滑方法

滑动的时候触发select样式&＃xff0c;进行绑定

让当前的列表项&＃61;&＃61;购物车的列表&＃xff0c;样式会被激活&＃xff0c;出现左滑删除

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

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

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

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

总结

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

您可能感兴趣的文章: