结构属性--body,footer

关键字-body, footer

关键字-body, footer, dot统称为结构属性,这类属性支持数据类型{Array},结构属性扩展了ITEM适用场景。 它们其实是一组ITEM结构的集合,即每个子项都是item的数据类型。

不支持嵌套

body, footer等结构属性的配置中,不能够配置自身属性。
下面的配置属性为错误配置

  {
    title: '外面的标题',
    body: [
      {title: '什么标题', body: []}  // 不能在body子项中嵌套使用body属性
    ]
  }

能够支持嵌套使用的结构属性为li,了解下一篇介绍

Array类型

下例代码以body切入来介绍结构属性

  Pager({
      data: {
        motto: Pager.item({
          body: [
            {title: '', img: '', '@list': {}, '@tree': {}, '@item': {}},
            {title: '', img: '', '@list': {}, '@tree': {}, '@item': {}},
            ...
            ...
          ]
        })
      },

哈哈,你注意到@list, @tree等属性了吗,这是另一个重要的属性,组件属性,这里仅仅引出一下,后面我们在详细讲解它

代码示例

  Pager({
      data: {
        motto: Pager.item({
          title: '正常的标题',
          body: [
            {title: 'body子项数据1', img: '/imgs/a.jpg', itemClass: 'body-item-class'},
            {title: 'body子项数据2', img: '/imgs/b.jpg', itemClass: 'body-item-class'},
            {title: 'body子项数据3', img: '/imgs/c.jpg', itemClass: 'body-item-class' aim: 'aimAction'},
            ...
            ...
          ]
        })
      },

上述代码编译生成后的结构如下

  <view class="item">
    <view class="header">
      <text>正常的标题</text>
    </view>
    <view class='bodys'>
      <text class="body-item-class">body子项数据1</text>
      <text class="body-item-class">body子项数据2</text>
      <text class="body-item-class" bind:tap="aim" data-evt="aimAction">body子项数据3</text>
    </view>
  <view>

当数据中出现结构属性,原本的title(正常的标题)将会被自动包裹在header的view标签中,当没有结构属性时,原本的title将会以最简单的方式展示,这样使得我们的结构足够精简