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

在另一篇文章《2018年设计趋势指南》中，我发现了一个不错的菜单，于是我想到了用微信小程序来实现。

先把成果摆上来

我们开始吧。

上方Nav

基本flex Layout和padding就不用多说了吧？

顺便说一下，微信小程序中输入的占位符样式是以占位符样式编写的，或者使用占位符类。

下方菜单

每个小卡片都遵循flex布局，宽度设置为：50%。别忘了flex-wrap:中每个小卡片的内侧都包裹着flex布局和垂直中心。想了想，还是3360。主视图项目{显示3360 Flexjustice-content : center；align-items:居中；宽度：50%；}flex真他妈的好用

至于里面的图片，我是从iconfont那里拿的，调整这些颜色的时间是我布局的几倍。

动画

微信小程序动画只能用JS，常规手段不可用。让我们集思广益。

观察每张卡片的折叠方向后，为每张卡片加上初始旋转，使其向后折叠。我在这里定义了两个类。

. rotateX 90 { transform : rotateX(-90 deg)；} . Rotatey 90 { transform : Rotatey(-90 deg)；}确定，那你就看不到卡了，然后在菜单按钮上添加旋转点击事件换卡，就会是Ojbk。

var duration=150 var item 1=wx . createanimation({ duration : duration，TransformOrigin : ' 000 ' })item 1。Rotatex (90)。第()步这。Setdata ({item1: item1，item1 style 3360' item1 style'})注意调整变换原点来控制折叠方向。对于下面的卡片，只需在创建动画中添加延迟字段(不同的是持续时间

很简单吧？

至于菜单检索，代码类似于展开，只是反过来。然而，一些展开序列和transformOrigin需要注意。让我们在这里发布一个代码：

var duration=150 var item 3=wx . createanimation({ duration : duration，transformOrigin: '100% 100% 0 '，Delay : duration * 2}) Item1。Rotatex (90)。第()步这。Setdata ({Item: Item3，Item3 Style :'})另外，我在数据中设置了ish hausing和ish hausing两个变量，来决定菜单是展开还是展开，从而控制点击事件。具体实现我就不在这里说了。