微信小程序实现酷炫弹出式菜单效果

如今，一个微信小程序的弹出就是一个菜单效果。像往常一样，首先显示渲染。(录制的gif动画有点卡顿，在真机或模拟器上运行流畅)

我们先简单说说思路：

1.首先，在屏幕上的某个位置放几个浮动按钮，放几个来看看你需要的功能

2.单击顶层的按钮(wxml中的最后一层是顶层)并添加背景遮罩。这个面具是在我定制面前的模态炸弹盒子的时候用的

3.分别为动画和透明度旋转和移动按钮，导致不同的动画位移距离

4.当你把它收起来，回到原来的位置，让透明度变成0，就可以了

思路完成后，让我们开始实现代码，它也被封装为一个组件，以便于调用。

第一个是wxml实现

view class=' drawer _ screen ' bind tap=' showOrHide ' wx : if=' { { isShow } } ' catch touch move=' my catch touch '/view view view image src=' http :/./img/add . png ' class=' buttom ' animation=' { { animDelLots } } ' bind tap=' deletellots '/image image src=' http :/./img/add . png ' class=' butter ' animation=' { { animaddd } } ' bind tap=' add '/image image src=' http :/./img/add . png ' class=' butter ' animation=' { { anim main } } ' bind

//悬停按钮。buttom { width: 100rpx高度： 100 rpx；display: flexflex-direction : row；位置：固定；bottom:60rpxright: 60rpxz-index : 1001；}.抽屉_屏幕{宽度： 100%；高度： 100%；位置：固定；top : 0；left : 0；right:0底部：0；z-index : 1000；背景技术： # 000；opacity: 0.5飞越：隐藏；}.抽屉_盒子{ overflow:隐藏；位置：固定；z-index : 1001；}json文件

{“组件”: True，“使用组件”: {}}最后，是js逻辑实现

//组件/菜单/菜单。jsvar系统信息=wx。getsysteminfosync()；组件({ /** *组件的属性列表*/properties: { }，/** *组件的初始数据*/data: { isShow: false，//是否已经弹出animMain: { }，//旋转动画animAdd: {}，//项位移，透明度animDelLots: { }，//项位移，透明度}, /** * 组件的方法列表*/methods: { //点击弹出或者收起showOrHide:函数(){ if(this。数据。issshow){//缩回动画这个。收回()；这个。setdata({ is show : false })} else {//弹出动画这个。popp()；这个。setdata({ isshow : true })}，添加：函数(){ this。triggerevent(' addEvent ')对此。showorhide()}，deletelots 3360函数(){ this。触发此事件。showorhide()}，//弹出动画popp:函数(){ //main按钮顺时针旋转var animationMain=wx。创建动画({持续时间： 500，TimingFunctions : ' ease-out ' })var animationDellots=wx。创建动画({持续时间： 500，TimingFunctions : '缓和' })var animationMain。rotatez(180).step()；animationDelLots.translate(0，-200/750 *系统信息。窗口宽度).rotateZ(180).不透明度(1)。step()；animationAdd.translate(0，-320/750 *系统信息。窗口宽度).rotateZ(180).不透明度(1)。step()；这个。setdata({ animain : animation main。export()、animdallots 3360 animdallots。export()、animadd : animation add . export()、}) }、//收回动画收回：函数(){ //main按钮逆时针旋转var animationMain=wx。创建动画({持续时间： 500，TimingFunctions : ' ease-out ' })var animationDellots=wx。创建动画({持续时间： 500，TimingFunctions : '缓和' })var animationMain。rotatez(0).step()；animationDelLots.translate(0，0).rotateZ(0).不透明度(0)。step()；animationAdd.translate(0，0).rotateZ(0).不透明度(0)。step()；这个。setdata({ animain : animation main。export()、animdallots 3360 animdallots。export()、animadd : animation add . export()、}) }、//解决滚动穿透问题myCatchTouch:函数(){ return }})在要调用的页面数据文件引用菜单组件（我这里引用了两个组件，还有一个是前面封装的对话组件)

使用组件' : { '对话框' : '/组件/对话框/对话框','菜单' : '/组件/菜单/菜单' },然后在调用的页面结构中使用

！- _addEvent和_ deleteLotsEvent分别是弹出菜单里面按钮对应的事件，需要在调用的射流研究…中实现-菜单隐藏id=' menu ' bind : addEvent=' _ addEvent ' bind : deleteelotsevent=' _ deleteLotsEvent '/调用菜单组件的射流研究…中实现菜单中项目的点击事件

_addEvent:函数(){//做点什么}，deleteLotsEvent:函数(){//做点什么}整体代码实现就这么多，代码比较简单，如果有不清楚的童鞋，请留言，我将为你们解答。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。