结构属性--dot

关键字-dot

关键字-dot为结构属性,不同于body, footer, 该结构的父级容器为ITEM本身,并没有被包裹在特定的view结构中。
该属性支持数据类型{Array}。 是一组ITEM结构的集合,即每个子项都是item的数据类型。
dot的子项需求一般作为浮动结构,如一般商品的 热门优惠等标签

Array类型

dot属性的基础代码

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

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

代码示例

  Pager({
      data: {
        motto: Pager.item({
          title: '正常的标题',
          dot: [
            {title: '热门', img: '/imgs/a.jpg', itemClass: 'dot-item-class'},
            {title: '活动', img: '/imgs/b.jpg', itemClass: 'dot-item-class'},
            {title: '折扣', img: '/imgs/c.jpg', itemClass: 'dot-item-class' aim: 'aimAction'},
            ...
            ...
          ]
        })
      },

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

  <view class="item">
    <view class="header">
      <text>正常的标题</text>
    </view>
    <text class="dot-item-class">热门</text>
    <text class="dot-item-class">活动</text>
    <text class="dot-item-class" bind:tap="aim" data-evt="aimAction">折扣</text>
  <view>

对照参考结构属性body, footer的输出结构

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