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

站长资源 2025/1/12 佚名

36 1538 36

DDR爱好者之家 Design By 杰米

效果图如下所示：

在线地址: 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,vuex,vue,router

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月12日

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

Vue+jquery实现表格指定列的文字收缩的示例代码

10个经典的网页鼠标特效代码

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接