基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
效果图如下所示: 在线地址: 点击下载安卓apk安装包 源码地址: 项目主架构 使用的库
设计布局: 将页面的固定布局 position:fixed (比如Header,Footer)全部改为绝对布 局position:absolute ; 因为fixed会出现莫名其妙的兼容性问题,比如在ios11或ios8下会失效,输入框软键盘激活之后会把底部的固定定位弹出去,导致布局错乱。 用absolute实现fixed细节可以参考这篇
数据请求:
逻辑交互:
优化方案:
实现细节媲美原生的页面前进和后退的动画实现: 指定transition:name 在data中声明默认的进出动画 在mounted()数据渲染初始化完成之后进行判断 拿到vuex的状态值 然后进行判断 最后将当前的组件名字传给vuex,实现不同的组件进去就有不同的切换动画。 下一页动画 返回上一页动画 购物车左滑删除 v-touch 在css中设置好删除按钮的偏移量 左右滑方法 滑动的时候触发select样式,进行绑定 让当前的列表项==购物车的列表,样式会被激活,出现左滑删除 注意页面的盒子使用盒子之后会和原生页面出现冲突,导致滑动不流畅 因此,需要在main.js指定默认的滑动方式为横向滑动触发 订单页面,点击顶部导航和左右滑动进行组件的切换以及动画样式的判断 也是使用的v-touch组件,实现方式和组件切换类似。 我给每个订单状态的组件一个不同的数字,根据这个数字,判断组件是左滑动的动画还是又滑动的动画 总结以上所述是小编给大家介绍的基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |