弹弹弹,弹走鱼尾纹的弹出菜单(vue)

原创 气势的信心 教程 全栈开发 522阅读 2018-09-11 15:16:19 举报

前言

上一篇面试的总结,大家看的还行,因为量很大,错误在所难免,希望大家发现错误了可以告诉我一声,我的邮箱是236490794@qq.com,一个小前端的希望。

言归正传

我们老样子直接先上效果图再开始今天的分享
这个项目的github可以看一看

组件分析

  1. 界面组成
  2. 逻辑分析
  3. 最终实现
界面组成

从上图中,我们可以看出界面主要分为menu和item2块,其中menu的动画是自传,item的动画是位移,然后这里我们通过绝对布局的方式将整个控件定位在四个角落

逻辑分析

这里我将这个控件几个属性独立出来,方便下次开发,其中包含,menu的背景,整个控件在屏幕的哪个角落,menu的宽高,item距离menu位移的距离,menu的背景色,及item的背景色,item的相关内容则由数据来控制,具体的我们直接在下方的实现里来讲解。

最终实现

这里我用代码加注释的方式,帮助大家理解,template我简单的带过一下

核心实现
通过分析可以得出,每个item的偏移量应该为
横向x:基础值 sin(角度值)
纵向y:基础值
cos(角度值)
角度值:(数组的长度-1-当前的下标) 每一块所占的角度 弧度表示
弧度表示:2 * Math.PI / 360

再父组件中引入就可以大功告成啦,先跳一会儿吧,燃烧你的卡路里

父组件调用

引入组件

在 components声明

template中使用

属性及方法一栏

属性名用处默认值是否必须
position四个方位(LT、LB、RT、RB)LT
menuBg菜单背景white
menuSrc菜单图片一个菜单图片
itemBg按钮背景white
width按钮宽度50px
baseDistance位移距离,若item很多,可适当提高150px
menuItems菜单数组
方法名用处参数
clickMenu点击item触发事件item,index

好了,差不多就分享这么多,


我的github,求戳,求star

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复