ITEM元件介绍

元件,组件构成的最小粒度元件。ITEM元件可大可小,用途很广泛,我们可以用item产出内容页的结构,也可以使用ITEM产出一行字符串数据

数据结构图

  • item结构
  • ITEM的组成结构

    • header

      头部,css position: relative
    • body

      躯干部, 数组, css position: relative
    • footer

      底部, 数组, css position: relative
    • dot

      随机部分, 数组, css position: absolute

TREE/LIST是构成页面的框架结构,ITEM是最基础项部分,ITEM有多重展示形式,能够用数据描绘出不同的结构

例子

item是最细粒度的元件,所有元件,组件都建立在item之上,根据不同的配置,产出不同的结构

例一,在列表中的item

  • item结构
  • ITEM的组成结构

    • 代码部分
        data: [
          { title: [
              {title: 'string', class: 'item' },
              {title: '简单字符', class: 'item icon-arrows-a-r color-999', aim: 'demo-string'},
          ]},
          ...
          ...
      
      上述ITEM代码产出红框列表项,该项比较简单,仅仅使用了title的关键字,该关键字支持String/Array/Object 左例中的由title生成的结构大致如下
    • 结构部分 listitem

构成ITEM的三个部分呢

我们将ITEM分成数据部分组件部分, 实例部分

数据部分,承载结构显示的主题内容,列表和树结构ITEM的容器。ITEM支持丰富的数据结构,如文本、图片、链接、响应等,同时我们在ITEM中可以引入树结构数据,列表结构数据及嵌套ITEM数据等,以及自定组件的数据结构

组件部分,依照小程序开发规则,熟悉vue的同学应该都清除,需要在模板中引入组件,并赋值给该组件

实例部分,原生小程序语法可以通过特定的方法取得设置id的组件实例,对于长期从事前端的同学来说有点麻烦,因此我们按照js熟悉的方式,引入了getElementsById的方法来获取ITEM实例

生成ITEM数据

下面我们先说明小程序数据的生成
pages/index/index.js

  const app = getApp()
  const Pager = require('components/aotoo/core')  // 引入我们封装的Page库
  Pager({
    data: {
      motto: Pager.item({
        title: '文本描述内容'
      })
    }
  })

将上例代码放在pages/index/index.js,这样就完成了一个简单的ITEM数据模型,当然ITEM还有更丰富的约定键值,后面我们会说明清楚
通过执行Pager.item方法,该方法包含一个参数(Object类型), 我们为motto设置了ITEM数据结构

组件引入

在本套架构中,我们的元件库、基础组件库都被定在在app.json中,即不需要重复引入(这里有个小程序的坑,不放在app.json中的组件引入,有时候会引入不到)

pages/index/index.wxml

  <view class="boxer">
    <ui-item item="{{motto}}"/>
  </view>

<ui-item>为ITEM组件的引入标签,该组件有一个属性item为该组件提供数据,上例中我们导入了motto变量,即完成了小程序的模板设置。写到这里,我们会发现以上的示例代码语法即为小程序的语法,除了Pager这个变量

调用实例

我们一般都会通过组件的实例方法来完成项目的交互需求,下面我们来看看怎么引入ITEM的实例

  Pager({
    data: {
      motto: Pager.item({ title: '文本描述内容' })
    },
    onLoad: function(){
      const motto = Pager.getElementsById('motto')  //item组件的实例
      motto.update({
        title: '更新的数据'
      })
    }
  })

在小程序的Page页面中,通过Pager.item初始化的ITEM数据,会将该数据的key名作为获取实例的关键字id,如上面的motto,然后我们通过Pager.getElementsById('motto')就能获得该实例
上例中我们使用itemInstance.update方法来更新motto的数据内容

注意: Pager.item是在Page页面中ITEM实例的声明方式,在组件开发中我们不这么用,当然用法非常简单,留待以后再说明

ITEM实例方法

itemInstance.show:显示ITEM结构
itemInstance.hide:隐藏ITEM结构
itemInstance.toggle:显示与否ITEM结构
itemInstance.reset:恢复该实例的初始化状态,初始化数据
itemInstance.update:更新ITEM的数据,为this.setData封装,简化this.setData的用法

为ITEM绑定事件方法

ITEM生成<view>标签,根据腾讯的官方说明,可以为view标签绑定一系列的事件,使view标签完成交互需求

ITEM支持的事件属性
参数 类型 对应方法 descript
tap {String} bind:tap 点击事件
catchtap {String} catch:tap 阻止冒泡tap
longpress {String} bind:longpress 长按
catchlongpress {String} catch:longpress 阻止冒泡长按
touchstart {String} bind:touchstart touch事件
touchmove {String} bind:touchmove touch事件
touchend {String} bind:touchend touch事件

我们在代码中来实现一次事件绑定

  Pager({
    data: {
      motto: Pager.item({ title: '文本描述内容', tap: 'onMytap' })
    },
    onMytap: function(e){
      const motto = Pager.getElementsById('motto')  //item组件的实例
      motto.update({
        title: '更新的数据'
      })
    }
  })

Pager.onMytap方法作为item的tap响应事件,在onMytap方法中,通过获取item实例来更新item的数据及结构

带参数的事件

在原生语法的基础上,我们做了更多的扩展,如上例中,我们为tap事件绑定参数,这不不需要将属性作为data-*挂在<view>结构上,可以直接从参数中获取

  Pager({
    data: {
      motto: Pager.item({ title: '文本描述内容', tap: 'onMytap?abc=123' })
    },
    onMytap: function(e, param){
      const {abc} = param
      console.log(abc)  // abc => 123
    }
  })

tap的query参数作为param传入到onMytap方法中,以方便我们处理之后的逻辑

细节事件--aim

一个丰富的ITEM结构,由多个细节部分构成,ITEM作为一个block的整体,可能需要绑定tap, longpress, touch等事件,但ITEM的某一个细节部分,通常且仅需要一个tap事件,我们使用了一个别名方法aim,使之与最表层的tap事件区别开来

  Pager({
    data: {
      motto: Pager.item({ 
        title: [
          { title: '文本描述内容', aim: 'onMyaim?abc=123' },
          { title: 'aim的默认响应方法', aim: 'goMyaim?abc=567'},
          { title: 'aim的默认响应方法', aim: 'isMyaim?abc=789'}
        ], 
        tap: 'onMytap?xyz=456' 
      })
    },
    onMytap: function(e, param){
      /*该方法响应外面的tap事件*/
      // param = {xyz: 456}
    },
    onMyaim: function(e, param){
      /*该方法响应aim:onMyaim事件*/
      const {abc} = param  // abc = 123
    },

    // 所有aim的默认响应事件为page/aim方法,除非特殊指定如上面的onMyaim
    // 本例中,goMyaim, isMyaim的默认响应方法
    aim: function(e, param){
      /*该方法响应aim事件*/
      const aimkey = e.currentTarget.dataset.aim  // goMyaim/isMyaim
      const {abc} = param  // abc = 567/789
    }

  })

ITEM的完整属性

基础属性
参数 类型 默认值 descript
title {String/Array/Object} item的显示部分
img {String/Array/Object} 配图,支持多图
attr {Object} item结构的data-*属性
itemClass {String} item结构的样式类
itemStyle {String} 指定item的样式
attr {Object} attr的kv将作为data-*属性赋值给结构

attr的所有属性值中,只有id会成为data-id的结构属性,如要获得所有属性,需要使用实例方法获得instance.attr()

ITEM支持的事件属性
参数 类型 对应方法 descript
tap {String} bind:tap 点击事件
catchtap {String} catch:tap 阻止冒泡tap
longpress {String} bind:longpress 长按
catchlongpress {String} catch:longpress 阻止冒泡长按
touchstart {String} bind:touchstart touch事件
touchmove {String} bind:touchmove touch事件
touchend {String} bind:touchend touch事件
结构属性

当item的结构较为复杂,引入部件参数,一旦引入了部件参数(li除外),则header部分会自动包裹一层div,

参数 类型 默认值 descript
li {Array[item, item...]} 使item支持列表
body {Array[item, item...]} item的body结构
footer {Array[item, item...]} item的footer结构
dot {Array[item, item...]} item的浮动结构
k {STRING/Object} 只支持在body/footer/dot中,设置属性KEY
v {STRING/Object} 依赖k,不能单独设定 只能用在body/footer/dot中,设置属性VALUE