diff --git a/example/pages/cell/index.json b/example/pages/cell/index.json
index 0f202a39..a23e9052 100644
--- a/example/pages/cell/index.json
+++ b/example/pages/cell/index.json
@@ -1,3 +1,8 @@
{
- "navigationBarTitleText": "Cell 单元格"
+ "navigationBarTitleText": "Cell 单元格",
+ "usingComponents": {
+ "zan-cell": "../../dist/cell/index",
+ "zan-icon": "../../dist/icon/index",
+ "zan-cell-group": "../../dist/cell-group/index"
+ }
}
diff --git a/example/pages/cell/index.wxml b/example/pages/cell/index.wxml
index 3cfb2e84..5654f366 100644
--- a/example/pages/cell/index.wxml
+++ b/example/pages/cell/index.wxml
@@ -5,114 +5,46 @@
CELL
-
- 单行列表
-
+
-
- 单行列表
- 详细信息
-
+
-
-
- 单行列表
- 详细信息
-
+
+
+
+ 带 icon 的 cell
+
+
+
+
+
+
+
+ 带箭头的 cell
+
+
-
-
- 单行列表
- 附加描述
-
- 详细信息
-
+
-
+ cell 组
-
- 单行列表
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
- 开关
-
-
-
-
-
-
-
-
- 单行列表
- 详细信息
-
-
-
-
-
- 多行列表
-
-
- 多行列表
-
-
- 多行列表
-
-
-
-
-
- 多行列表
- 详细信息
-
-
- 多行列表
- 详细信息
-
-
- 多行列表
- 详细信息
-
-
-
-
-
- 多行列表
-
-
-
- 多行列表
-
-
-
- 多行列表
-
-
-
-
-
-
- 多行列表
- 详细信息
-
-
- 多行列表
- 详细信息
-
-
- 多行列表
- 详细信息
-
-
-
diff --git a/packages/cell-group/index.js b/packages/cell-group/index.js
new file mode 100644
index 00000000..ddfa1d33
--- /dev/null
+++ b/packages/cell-group/index.js
@@ -0,0 +1,19 @@
+Component({
+ relations: {
+ '../cell/index': {
+ type: 'child',
+ linked (target) {}
+ }
+ },
+ ready () {
+ let cells = this.getRelationNodes('../cell/index')
+
+ if (cells.length > 0) {
+ let lastIndex = cells.length - 1
+
+ cells.forEach((cell, index) => {
+ if (index < lastIndex) cell.notLastCell()
+ });
+ }
+ }
+})
\ No newline at end of file
diff --git a/packages/cell-group/index.json b/packages/cell-group/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/cell-group/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
\ No newline at end of file
diff --git a/packages/cell-group/index.wxml b/packages/cell-group/index.wxml
new file mode 100644
index 00000000..9966b641
--- /dev/null
+++ b/packages/cell-group/index.wxml
@@ -0,0 +1,3 @@
+
+
+
\ No newline at end of file
diff --git a/packages/cell/README.md b/packages/cell/README.md
index 4129159d..85df35f2 100644
--- a/packages/cell/README.md
+++ b/packages/cell/README.md
@@ -1,54 +1,68 @@
## Cell 单元格
-### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+自定义 cell 组件
+
+### 属性与事件
+
+| 名称 | 类型 | 是否必须 | 默认 | 描述 |
+| ------------- | ----------- | -------- | ----- | -------------------------------------------------------------------------------------------------------- |
+| title | String | 否 | 无 | 左侧标题 |
+| label | Boolean | 否 | false | 标题下方的描述信息 |
+| value | String | 否 | 取消 | 右侧内容 |
+| isLink | Number | 否 | 55 | 链接，用于导航，如果是 `Boolean` 型值则只显示链接样式，`String` 类型值才做导航，但是组件不检查路径正确性 |
+| linkType | String | 否 | 无 | 链接跳转类型，可选值为 `navigateTo`，`redirectTo`，`switchTab`，`reLaunch` |
+| onlyTapFooter | Boolean | 否 | false | 只有点击 footer 区域才触发 tab 事件 |
+| bindtap | EventHandle | 否 | 无 | 点击 cell 时触发，`onlyTapFooter` 为 `true` 时点击 footer 区域触发 |
+
+### 可用的 slot
+
+| 名称 | 是否必须 | 默认 | 描述 |
+| ------------- | ----------- | ---- | --------------------------------------------------------------------- |
+| 默认 | 否 | 无 | 左侧除了 `title`，`label` 外的自定义 wxml 内容 |
+| icon | 否 | 无 | 标题前自定义的 icon，可使用 `icon` 自定义组件，具体使用参考 icon 组件 |
+| footer | 否 | 无 | 右侧自定义 wxml 内容，如果设置了 `value` 属性，则不生效 |
+
+### cell 组
+
+多个 cell 组件必须作为 `cell-group` 组件的子组件，否则可能出现显示问题。
+
+#### 单个 cell 使用示例
+~~~json
+ {
+ ...
+ "usingComponents": {
+ "zan-cell": "../../dist/cell/index",
+ }
+ ...
+ }
+~~~
+
+~~~wxml
+
+~~~
+
+#### cell 组使用示例
+```json
+ {
+ ...
+ "usingComponents": {
+ "zan-cell": "../../dist/cell/index",
+ "zan-cell-group": "../../dist/cell-group/index"
+ }
+ ...
+ }
```
-### 代码演示
-
-#### 基础用法
-`zan-cell` 有三部分组成：
-顶部 Icon：`zan-cell__icon`
-主内容区：`zan-cell__bd`
-附属内容：`zan-cell__ft`
-
-```html
-
-
- 单行列表
- 详细信息
-
-```
-
-当然，也可以在内容区增加附加描述
-```html
-
-
- 单行列表
- 附加描述
-
- 详细信息
-
-```
-
-#### 带箭头的单元格
-在根元素上增加 `zan-cell--access`，可以在右侧显示出箭头。
-```html
-
- 单行列表
-
-
-```
-
-#### 带开关的单元格
-增加 `zan-cell--switch`，更好的适配带有开关的情况
-```html
-
- 开关
-
-
-
-
-```
+```wxml
+
+
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/packages/cell/index.js b/packages/cell/index.js
new file mode 100644
index 00000000..80a94957
--- /dev/null
+++ b/packages/cell/index.js
@@ -0,0 +1,75 @@
+const warn = (msg, getValue) => {
+ console.warn(msg)
+ console.log('接受到的值为：', getValue)
+}
+
+Component({
+ options: {
+ multipleSlots: true
+ },
+ relations: {
+ '../cell-group/index': {
+ type: 'parent'
+ }
+ },
+ properties: {
+ title: {
+ type: String,
+ description: '左侧标题'
+ },
+ label: {
+ type: String,
+ description: '标题下方的描述信息'
+ },
+ value: {
+ type: String,
+ description: '右侧内容'
+ },
+ onlyTapFooter: {
+ type: Boolean,
+ description: '只有点击 footer 区域才触发 tab 事件'
+ },
+ isLink: {
+ type: null,
+ value: '',
+ description: '链接，用于导航，如果是 Boolean 型值则只显示链接样式，String 类型值才做导航，但是组件不检查路径正确性'
+ },
+ linkType: {
+ type: String,
+ value: 'navigateTo',
+ description: '链接类型，可选值为 navigateTo，redirectTo，switchTab，reLaunch'
+ }
+ },
+ data: {
+ isLastCell: true
+ },
+ methods: {
+ navigateTo () {
+ let url = this.data.isLink.toString()
+ let type = typeof this.data.isLink
+
+ this.triggerEvent('tap', {})
+
+ if (!this.data.isLink || url === 'true' || url === 'false') return;
+
+ if (type !== 'boolean' && type !== 'string') {
+ warn('isLink 属性值必须是一个字符串或布尔值', this.data.isLink)
+ return
+ }
+
+ if (['navigateTo', 'redirectTo', 'switchTab', 'reLaunch'].indexOf(this.data.linkType) === -1) {
+ warn('linkType 属性可选值为 navigateTo，redirectTo，switchTab，reLaunch', this.data.linkType)
+ return
+ }
+ wx[this.data.linkType].call(wx, { url })
+ },
+ cellTap () {
+ if (!this.data.onlyTapFooter) {
+ this.navigateTo()
+ }
+ },
+ notLastCell () {
+ this.setData({ isLastCell: false })
+ }
+ }
+})
\ No newline at end of file
diff --git a/packages/cell/index.json b/packages/cell/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/cell/index.json
@@ -0,0 +1,3 @@
+{
+ "component": true
+}
\ No newline at end of file
diff --git a/packages/cell/index.pcss b/packages/cell/index.pcss
index 63c54c40..5017c06a 100644
--- a/packages/cell/index.pcss
+++ b/packages/cell/index.pcss
@@ -16,9 +16,13 @@
right: 0;
}
-.zan-cell__icon {
+.zan-cell .zan-cell__icon {
margin-right: 5px;
}
+.zan-cell .zan-cell__icon:empty {
+ display: none
+}
+
.zan-cell__bd {
flex: 1;
}
@@ -49,8 +53,7 @@
padding: 12px 15px 12px 0;
}
-.zan-cell--last-child::after,
-.zan-cell:last-child::after {
+.zan-cell.last-cell::after {
display: none;
}
diff --git a/packages/cell/index.wxml b/packages/cell/index.wxml
new file mode 100644
index 00000000..a7d7b6a6
--- /dev/null
+++ b/packages/cell/index.wxml
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
+ {{ title }}
+ {{ label }}
+
+
+
+
+ {{ value }}
+
+
+
+
+
\ No newline at end of file