小程序实现多重扩展菜单

小程序实现多折叠和展开菜单很常见，实现起来非常简单。下面是如何实现如何实现小程序实现多折叠和扩展菜单效果显示：

开始主题

导航

基本的flex布局加上填充不需要多说话？

要提一下，微信小程序中输入的占位符样式是用占位符样式或使用占位符类写的

菜单下方

每张卡都遵循flex布局，设置宽度: 50％，不要忘记flex-wrap: wrap

每张小卡都具有相同的柔性布局和垂直居中。如果你考虑一下，它将属于科学:

。主要视项{

显示: flex;

Justify-content: center;

对齐项目: center;

宽度: 50％;

}

动画

微信小程序的动画只能用于JS，传统的手段不可用，头脑风暴就是黑客攻击

在观察每张卡的折叠方向后，将初始旋转添加到每张卡以使其反转。我在这里定义了两个类

.rotateX90 {

变换: rotateX（-90deg）;

}

.rotateY90 {

变换: rotateY（-90deg）;

}

好的，你看不到卡片，然后将点击事件添加到菜单按钮以更改卡片在Ojbk上的旋转

Var持续时间=150

Var item1=wx.createAnimation（{

持续时间:持续时间，

transformOrigin:'0 0 0'

}）

item1.rotateX（90）。步骤（）

this.setData（{

Item1: item1，

item1Style:'item1Style'

}）

请注意，调整transformOrigin以控制折叠方向，您可以为后续卡片添加延迟字段createAnimation（差异是差异的持续时间）

这很简单吗？

至于菜单的缩进，代码与扩展几乎相同，但反之亦然，但有些扩展序列和transformOrigin需要注意，这里仍然是代码:

Var持续时间=150

Var item3=wx.createAnimation（{

持续时间:持续时间，

transformOrigin:'100％100％0'，

延迟:持续时间* 2

}）

item1.rotateX（90）。步骤（）

this.setData（{

Item3: item3，

item3Style:''

}）

另外，我在数据中设置了两个变量isShow和isShowing，以确定菜单是扩展还是正在扩展以控制click事件。这里没有提到具体实现

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。

更多小程序开发案例，全部位于：http://www.hvihi.com/xiaocx/kaifa.html

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。