饿了么购物车动画

之前用饿了么印象最深刻的是联动菜单和小球飞入购物车动画,所以想看看别人是怎么实现的,但是看了很多仿饿了么的demo都是实现了一个完整的大的项目,要找到那个小模块很麻烦,所以自己将联动菜单和动画提取出来写了一个demo,方便学习。

目的只是想突出功能所以界面细节很relax,大家也relax的看看吧~

效果图

 

饿了么购物车动画

实现功能 1. 联动菜单 1.1 用户点击左侧导航栏会跳转到相应的内容

这个很简单,给导航栏的每一个元素加一个点击事件,其实也可以通过a标签的锚点来实现

<li v-for="(item, index) in navs" :key="index" :class="{click: selector==index}" @click="toHash(item, index)"> {{item}} </li>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpssjy.html