小程序的超级组件(一)，item组件

queryui是我们在项目中沉淀的小程序组件库，汲取了jquery的一些特性，使小程序更易于开发(微信原生)

github

小程序demo

queryui中ui-item/ui-list/ui-tree这三个非常重要的组件，我们称之为超级组件，超级组件依据标准化的数据，产出标准化的结构，赋予其样式形成不同的组件，queryui的绝大部分组件均由超级组件构成。

《小程序超级组件之LIST》

超级组件ITEM

item组件为组件的最小单位

wxml

<ui-item item="{
  {config}}" />

js

Pager({
  data: {
    config: {
      id: '',
      ...
    }
  }
})

属性

下列说明
‘S’代表String
'A’代表Array
'O’代表Object
'F’代表Function
'b’代表bind
'c’代表catch

名称	类型	说明
id	S	容器id
$$id	S	实例名称
title	S/O/A	标题
url	S	链接
type	O	容器类型
img	S/O/A	定义图片
itemClass	S	样式类
itemStyle	S	内联样式
attr	O	data-*属性
body	A	子容器
footer	A	子容器
dot	A	特殊子容器
methods	O	实例属性方法
tap	S/F	b:tap
aim	S/F	c:tap
longtap	S/F	longtap
longpress	S/F	longpress
touchstart	S/F	touchstart
touchmove	S/F	touchmove
touchend	S/F	touchend
catchlongtap	S/F	c:tap
catchlongpress	S/F	c:longpress

API

名称	说明
show	显示
hide	隐藏
toggle	切换显示隐藏
getData	当前数据
attr	当前data-*数据
mount	绑定id实例
parent	查找父级
siblings	查找兄弟
addClass	追加样式类
hasClass	是否有样式类
removeClass	删除样式类
toggleClass	切换样式类
css	设置内联样式
update	设置内联样式
reset	恢复初始值
find	查找子元素
hooks	钩子方法

使用说明

一个ITEM就是一个View

item组件会自动生成view包裹里面的内容

示例一

config = {
   
  itemClass: 'boxer'
}

生成如下

<view class="boxer"></view>

示例二

config = {
   
  title: '123'
  itemClass: 'boxer'
}

生成如下

<view class="boxer">
  <text>123</text>
</view>

示例三

config = {
   
  title: '123'
  itemClass: 'boxer',
  aim: 'onAim?id=xxx' // aim为catch:tap的别名, tap为bind:tap的别名
}

生成如下

<view class="boxer" catch:tap="onAim?id=xxx">
  <text>123</text>
</view>

示例四

config = {
   
  title: '123'
  itemClass: 'boxer',
  aim: 'onAim?id=xxx', // aim为catch:tap的别名, tap为bind:tap的别名
  body: [
    {
   
      title: 'sub-title-123',
      itemClass: 'sub-boxer',
      tap: 'onSubTap'
    }
  ]
}

上例生成如下

<view class="boxer" catch:tap="onAim?id=xxx">
  <text>123</text>
  <view class='hbody'>
    <ui-item>
      <view class='sub-boxer' bind:tap="onSubTap">
        <text>sub-title-123</text>
      </view>
    </ui-item>
  </view