基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
效果图如下所示:
在线地址: 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的状态值
然后进行判断
最后将当前的组件名字传给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样式,进行绑定
让当前的列表项==购物车的列表,样式会被激活,出现左滑删除
注意页面的盒子使用盒子之后会和原生页面出现冲突,导致滑动不流畅
因此,需要在main.js指定默认的滑动方式为横向滑动触发
订单页面,点击顶部导航和左右滑动进行组件的切换以及动画样式的判断
也是使用的v-touch组件,实现方式和组件切换类似。 我给每个订单状态的组件一个不同的数字,根据这个数字,判断组件是左滑动的动画还是又滑动的动画
总结
以上所述是小编给大家介绍的基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- Vue-router结合transition实现app前进后退动画切换效果
- 原生JS实现移动端模块的左右滑动切换效果,基于vue、stylus
- Vue-router结合transition实现app前进后退动画切换效果的实例
- Vue-router结合transition实现app前进后退动画切换效果
- vue-router实现webApp切换页面动画效果代码
- 基于Vue实现页面切换左右滑动效果
- 基于vue-router的页面切换动画
- Vue.js实现微信过渡动画左右切换效果
- vue实现app页面切换动画效果实例
- 基于JavaScript实现动画轮播效果
- 手势检测实现相册的左右滑动(并加上移动与旋转的特效) 首先,activity_main.xml里,使用ViewFlipper组件(可使用动画控制多个组件之间的切换效果) <?xml version="
- 基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
- 基于javascript实现漂亮的页面过渡动画效果附源码下载
- 基于JS实现简单的样式切换效果代码
- 使用CSS实现outline切换的动画效果
- Vue2路由动画效果实现
- Android利用ViewFlipper实现屏幕切换动画效果
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- Android 深入ViewPager补间动画,实现类京东商城首页广告Banner切换效果
- Android利用ViewFlipper实现屏幕切换动画效果