标题属性--title

title属性

title属性可作为标题, 内容, 描述, icon等内容,下面的例子我们会使用title来生成一篇短文
title属性支持{String/Object/Array}三种数据类型, 分别对应简单,复杂等各类型需求

String类型

string类型直接生成<text />标签内容

  Pager({
      data: {
        motto: Pager.item({
          title: '该内容直接生成<text>标签内容'
        })
      },

Object类型

这一类型允许指定标题相关属性,如class, style, aim等属性

  Pager({
      data: {
        motto: Pager.item({
          title: {title: '内容部分', itemClass: 'abc'}
        })
      },

上例中生成带属性class的<text class="abc">标签

aim属性

aim属性是tap的别名属性,为ITEM结构的细节绑定tap事件方法。

  • item结构
  • 左图为ITEM结构

    左图是借用淘宝的一张图片,为了清楚的说明aim的使用
    ITEM作为一个block的整体,可能需要绑定tap, longpress, touch等事件,而左图示例中的红框部分,作为ITEM的一个细节部分,通常且仅需要一个tap事件,我们使用了一个别名方法aim,使之区别开来,左图中大概的代码结构如下
      {
        title: [
          {title: '¥4980.00', itemClass: 'red-title'},
          {title: '现货漫威....', itemClass: 'caption-title'}
        ],
        body: [
          {title: 'janelove旗舰店', itemClass: 'attr-title', aim: 'gotoStore'},
          {title: '广东 广州', itemClass: 'attr-title right-title'},
        ]
      }
      ...
      ...
      gotoStore: function(e, param){
        /* 响应aim点击事件*/
      }
    

Array类型

这一类型title为数组,数组项允许使用以上两种数据类型

  Pager({
      data: {
        motto: Pager.item({
          title: [
            '文本类型的title',
            {title: '内容部分', itemClass: 'abc'}
          ]
        })
      },

上例中生成带属性class的<text class="abc">标签

生成一篇文章

完整代码
下例中,我们用item生成了一篇小的文档

  • item结构
  • ITEM的组成结构

    • 代码部分
      Pager({
        data: {
          motto: Pager.item({......})
        },
        onLoad: function(){
          stringData = {
            title: [
              {title: '字符串', class: 'h2'},
              {title: '自定义字符串', class: 'h6', style: 'margin: 0 0 50rpx 0;'},
              {title: '据悉,一年前该机构的研究就展示出......' }
            ],
            itemClass: 'padding-20-r'
          }
          const motto = Pager.getElementsById('motto') 
          motto.reset().update(stringData)
        }
        ...
        ...
      })
      

可以使用getElementsById方法获得item的实例(Pager.item初始化数据),该方法为了兼顾前端同学的使用习惯
执行motto.reset()使得ITEM实例恢复初始化时的数据和结构
执行update(...)来重新设置ITEM实例的数据源