⼩程序实现多折叠展开菜单功能（附源码）⼩程序实现多折叠展开菜单⾮常常见，想实现也⾮常简单，下⾯为⼤家介绍如何实现的⽅式
开始正题
上⽅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%;
  }
动画
  ⼩程序的动画只能⽤JS，常规⼿段不可⽤，来个头脑风暴hack起来
  观察每个卡⽚的折叠⽅向后，为每个卡⽚添加初始 rotate 使其反向折叠，我在这⾥定义了两个Class
.rotateX90{
  transform: rotateX(-90deg);
  }
  .rotateY90{
  transform: rotateY(-90deg);
  }
好了这样就看不到卡⽚了，然后给菜单按钮添加点击事件改变卡⽚的rotate就Ok啦
var duration = 150
  var item1 = wx.createAnimation({
  duration: duration,
  transformOrigin: '0 0 0'
  })
  ateX(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
  })
  ateX(90).step()
  this.setData({
  item3: item3,
  item3Style: ''
  })
另外我在 data ⾥设置了两个变量 isShow 和 isShowing 来判断菜单是否展开或者正在展开，来控制点击事件，具体实现这⾥就不讲了。
如果你也想开发⼀款属于⾃⼰的⼩程序，可以通过第三⽅专业开发平台，来帮助你实现开发需求：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。