组件属性--@list

@list=list组件,我们可以在item配置项中嵌套使用item/tree/list组件,以应对复杂的需求

在ITEM组件中嵌套使用list组件

组件属性使得ITEM结构中可以包含其他定义的组件,我们通过前缀符号@定义组件属性,目前我们可以使用@item, @list, @tree等组件属性,而无需调整模板

基础语法

  const app = getApp()
  const Pager = require('components/aotoo/core')
  Pager({
    data: {
      motto: Pager.item({
        title: '使用LIST组件完成复杂结构',
        "@list": {
          data: [ ... ],  // list组件的data属性
          show: true,
          itemClass: 'list-item-class',  // 为list的每一个Item子项设置初始样式
          listClass: 'list-class',  // list的容器样式
        }
      })
    },

@list的数据结构

list组件的数据必须是Object类型数据,包含必填属性data,该属性数据参考如下 @list.data属性是list组件

  {
    ...
    ...
    "@list": {
      data: [
        {title: '子项一'}, // 其实是item的配置项
        {title: '子项二'},
        {title: '子项三'},
      ], 
    }
  }

更多的属性设置参考list元件

示例

以下示例展示了@list的应对复杂需求的效果及代码(非完整代码,仅供参考)

  • item结构
  • ITEM的组成结构

    • 代码部分
      Pager({
        data: {
          motto: Pager.item({......})
        },
        onLoad: function(){
          listData = {
            itemClass: 'x',
            title: [
              {
                '@list': {
                  itemClass: 'li item-pic hei45',
                  listClass: 'ul list-normal'
                  data: [
                    {
                      title: [{
                          img: {
                            src: 'https://img13.360buyimg.com/n7/jfs/t1/3/15/4536/138660/5b997bf8Ed72ebce7/819dcf182d743897.jpg',
                            class: 'item-pic-45 mr10'
                          },
                        },
                        {
                          title: '99',
                          class: 'icon-dot icon-dot-more'
                        }
                      ],
                      li: [{
                        body: [{
                            title: {
                              title: '我是标题',
                              class: 'item-title'
                            }
                          },
                          {
                            title: {
                              title: '12:22',
                              class: 'item-time'
                            }
                          }
                        ],
                        footer: [{
                            title: {
                              title: '简介简介简介简介简介',
                              class: 'item-desc'
                            }
                          },
                          {
                            icon: {
                              class: 'item-icon icon-apptubiao-110'
                            }
                          }
                        ]
                      }]
                    },
                    ...
                    ...
                  ]
                }
              },
            ]
          }
          const motto = Pager.getElementsById('motto') 
          motto.reset().update(listData)
        }
        ...
        ...
      })