TREE元件

TREE组件是LIST组件的扩展,同样也是ITEM组件的合集

参数属性

key type descript
data {Array[item, item...]} item的配置请参考
type {Object}默认list 列表类型scroll/swiper/list
listClass {String} 列表容器的样式类
itemClass {String} 列表子项样式类
listStyle {String} 列表容器样式
itemStyle {String} 列表子项样式

type指定该list组件的类型为scroll,swiper, list, list类型可不指定

数据结构补充属性--idf, parent

有经验的前端同学都知道,树形HTML有层次结构,父子级关系,同样对于小程序这种类XML结构的描述性语言,也需要维护一套层级结构,在aotoo架构中我们的tree组件是一套抽象方法,同样适用于小程序。

我们使用数据的层级来映射生成结构层级,为此,我们在list的数据结构补充了两个属性idf, parent,用来描述数据项的父子级关系

tree的简单数据结构

  {
    data: [
      {title: '数据项1', idf: 'level-1'},    // 父级
      {title: '数据项2', parent: 'level-1'},  // level-1子级
      {title: '数据项3', parent: 'level-1'},

      {title: '数据项4', idf: 'level-2', parent: 'level-1'},  // 既是level-2父级同时也是level-1子级
      {title: '数据项5', parent: 'level-2'},
      {title: {
        '@list': {...}
      }, parent: 'level-2'},
    ]
  }

上例中我们简单描述了一个两层结构的数据,并且在最后一项中补充了一个@list组件,基于tree的配置我们可以产出一套非常丰富的结构。

scroll列表类型

参考LIST组件

swiper列表类型

参考LIST组件

实例方法

TREE组件是LIST组件的扩展,使用方式与LIST保持一致
参考LIST组件