使用ivx学习开发折叠面板的学习经验分享

1、首先，先展示下酃廓邻呦折叠菜单所需要表现的效果。从图中我们可以看出左边的侧边栏中有父菜单，父菜单下又有子菜单，子菜单下还有子菜单，有子菜单的选项右边会有箭头，子菜单展开/未展开时，箭头方窕掷烙宴向不同，点击对应选项后内容区会显示对应内容。折叠面板可以用于多级菜单栏，它初始只会显示其内部第一层的菜单选项，可以通过点击菜单选项展开或收起其内部更深层的菜单选项，可以用于对复杂区域进行分组和隐蔽，保持页面的整洁。

3、Demo中这个折叠面板一共有3级，每一级下的基础栏都是相同的，而基础栏其实就是每一级的一个选项模板，将这个袷蜍滇刷模板绑定循环中的数据，从而指导使用者判断选择自己所需要的菜单，基础栏中的箭头的状态也绑定了一些信息，比如当前栏没有子菜单的时候，箭头不会显示，有子菜单的时候，子菜单是否展开，箭头的方向也不同，这些也需要用到if判断组件去判断；我们将每一级的选项视为父选项，那么这个父选项下的下一级基础栏就是这个父选项的子菜单，例如下图中’购物中心’,’我的订单’’全部订单’都是基础栏，而’购物中心’是’我的订单的’父选项，’我的订单’又是’全部订单’的父选项，所以我们在每一级的循环下，要添加子菜单的话，就要在这个循环下再添加一级循环。

5、接下来不是第一级的循环都绑定当前数据的子数据就行了，因为后面循环中所用到的数据都是当前父选项的子菜单数据

7、这里我们通过布尔变量的值判断是否展开子菜单，所以将子菜单是否可见的if判断组件与添加的布尔变量绑定。

9、由于子菜单也可能有其子菜单，所以创建原理和父菜单是相同的，所以创建方式也是相同的，只是当前循环数据发生了变化，demo中一共有3级，所以一共创建了3级循环。