使用ivx学习开发折叠面板的学习经验分享
本篇学习经验讲解如何使用ivx的if判断组件和for循环组件来创建一个折叠菜单栏。
展示折叠菜单效果
首先，我们需要展示折叠菜单所需的效果。从图中可以看出，侧边栏有父菜单，父菜单下有子菜单。有子菜单的选项右边会有箭头，子菜单展开/未展开时，箭头方向不同。点击菜单选项后，内容区域会显示对应内容。折叠面板可以用于多级菜单栏，它初始只会显示第一层菜单选项，可以通过点击展开或收起更深层的菜单选项。
创建侧边栏和内容区
首先，我们要创建好侧边栏和内容区。
使用循环和条件判断组件创建折叠菜单栏
在Demo中，这个折叠菜单栏一共有3级。每一级的基础栏都是相同的，而基础栏就是每一级的一个选项模板。我们将这个模板与循环中的数据进行绑定，以帮助用户选择所需的菜单。
基础栏中的箭头状态也绑定了一些信息，比如当前栏没有子菜单时，箭头不会显示。有子菜单时，子菜单是否展开，箭头的方向也不同。这些需要用到if判断组件来判断。每一级选项视为父选项，下一级基础栏是父选项的子菜单。例如，在下图中，“购物中心”，“我的订单”，“全部订单”都是基础栏。“购物中心”是“我的订单”的父选项，“我的订单”是“全部订单”的父选项。因此，如果要添加子菜单，就需要在每一级循环下再添加一级循环。
绑定数据与子数据
给第一级循环绑定数据时，直接绑定全部数据，因为全部数据都要注入到菜单栏中。而后面的循环只需绑定当前数据的子数据即可。
处理展开状态和子菜单判断
菜单栏是否为展开状态需要一个变量来绑定，最适合使用布尔变量。因此，我们添加一个布尔变量来判断该栏子菜单是否展开。同时，判断当前菜单栏是否有子菜单需要用到if判断组件。我们通过布尔变量的值来判断是否展开子菜单，将子菜单是否可见的if判断组件与添加的布尔变量绑定。
通过当前数据的值的长度是否为0，我们可以判断是否有子项。因此，将是否有子项的if判断组件与当前循环的值的长度是否为0绑定。
创建多级循环
由于子菜单也可能有其子菜单，所以创建原理和父菜单相同，只是当前循环数据不同。在Demo中一共有3级，所以我们创建了3级循环。
添加点击事件
最后，给每级循环中的菜单栏添加点击事件，从而实现每次点击改变子菜单是否可见的效果。通过改变布尔变量的值，与是否展开子菜单绑定，就能实现展开或收起的效果。
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
