微信小程序实现多折叠展开酷炫菜单

末蓝、 2022-05-25 13:15 444阅读 0赞

> **小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java线上bug实时监控。真的是一个很好用的bug监控服务，众多大佬公司都在使用。**

## 背景 ##

在这篇文章[《2018年设计趋势指南》][2018]中发现一款菜单不错，就想着用微信小程序实现

## 先上个动图 ##

![162a41bb2187decd_imageslim][]

## 开始正题 ##

### 上方Nav ###

基本`flex`布局再加个`padding`不需要多讲吧?

> 提一下，微信小程序里input的placeholder样式是写在`placeholder-style`里或使用`placeholder-class`

### 下方菜单 ###

*  每个小卡片遵从`flex`布局，设置`width: 50%`，别忘了`flex-wrap: wrap`
 *  每个小卡片内部同为`flex`布局并设置垂直居中，想了想还是科普下:

.main-view-item{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
    }

> flex真他娘的好用

至于里面的图片是从[iconfont][]上拿的，调这几个配色的时间是我布局时间的几十倍....

### 动画 ###

> 微信小程序的动画只能用JS，常规手段不可用，来个头脑风暴hack起来

观察每个卡片的折叠方向后，为每个卡片添加初始`rotate`使其反向折叠，我在这里定义了两个Class

.rotateX90{
      transform: rotateX(-90deg);
    }
    .rotateY90{
      transform: rotateY(-90deg);
    }

好了这样就看不到卡片了，然后给菜单按钮添加点击事件改变卡片的rotate(动态改变Class)就Ojbk啦,就像这样

> 实际情况应该用`wx:for`进行循环渲染

var duration = 150
    
    var item1 = wx.createAnimation({
      duration: duration,
      transformOrigin: '0 0 0'
    })
    
    item1.rotateX(90).step()
    
    this.setData({
      item1: item1,
      item1Style: 'item1Style'
    })

这里注意调整`transformOrigin`来控制折叠方向，对于后面的卡片在`createAnimation`中添加`delay`字段即可(差为`duration`的等差数列)

> 是不是很简单嗯?

至于菜单的收回，代码和展开差不多，就是反过来而已，不过有些展开的顺序和`transformOrigin`需要注意，这里还是贴一个代码吧:

var duration = 150
    
    var item3 = wx.createAnimation({
      duration: duration,
      transformOrigin: '100% 100% 0',
      delay: duration * 2
    })
    
    item1.rotateX(90).step()
    
    this.setData({
      item3: item3,
      item3Style: ''
    })

另外我在`data`里设置了两个变量`isShow`和`isShowing`来判断菜单是否展开或者正在展开，来控制点击事件，差不多像这样

handleClick(){
      if(this.data.isShowing)
        return;
      else if(!this.data.isShow)
        this.showMenu()
      else
        this.hideMenu()
    }

在动画完成后对`isShow`和`isShowing`进行修改即可

作者：AddOneG  
链接：https://juejin.im/post/5ac9c177f265da23884d5442

[Fundebug][Fundebug 1]提供JavaScript监控，支持所有主流前端框架，微信小程序监控，微信小游戏监控，后端Node.js监控。

![1386816-20180502112633892-1858746955.png][]

**您可能感兴趣的**

1.  [详解1000+项目数据分析出来的10大JavaScript错误][1000_10_JavaScript]
2.  [10个用Console来Debug的高级技巧][10_Console_Debug]
3.  [Fundebug支持区分Source Map版本][Fundebug_Source Map]
4.  [Debug前端HTML/CSS][Debug_HTML_CSS]
5.  **[Fundebug：小程序的运维中心][Fundebug 2]**

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。  
自从2016年双十一正式上线，Fundebug累计处理了6亿+错误事件，得到了Google、360、金山软件等众多知名用户的认可。欢迎免费试用！

![70][]

[Fundebug]: https://www.fundebug.com/
[2018]: https://link.juejin.im?target=https%3A%2F%2Fjuejin.im%2Fpost%2F5aa62d3bf265da239b4112b3
[162a41bb2187decd_imageslim]: https://user-gold-cdn.xitu.io/2018/4/8/162a41bb2187decd?imageslim
[iconfont]: https://link.juejin.im?target=http%3A%2F%2Fwww.iconfont.cn%2F
[Fundebug 1]: https://www.fundebug.com
[1386816-20180502112633892-1858746955.png]: /images/20220525/650571753aae459aade924f363aee00f.png
[1000_10_JavaScript]: https://blog.fundebug.com/2018/03/12/top-10-javascript-errors-from-1000-projects/
[10_Console_Debug]: https://blog.fundebug.com/2018/03/19/10-tips-for-debugging-with-console/
[Fundebug_Source Map]: https://blog.fundebug.com/2017/12/26/fundebug-can-distinguish-sourcemap-version/
[Debug_HTML_CSS]: https://blog.fundebug.com/2018/01/02/how-to-debug-frontend-html-css/
[Fundebug 2]: https://blog.csdn.net/qq_40126542/article/details/80112657
[70]: /images/20220525/fd37deb7f5c04c4188bda7246707d872.png