2018-03-25 18:26:57 +08:00

3.2 KiB
Raw Blame History

Cell 单元格

自定义 cell 组件

属性与事件

名称 类型 是否必须 默认 描述
title String 左侧标题
label Boolean false 标题下方的描述信息
value String 取消 右侧内容
isLink Number 55 链接,用于导航,如果是 Boolean 型值则只显示链接样式,String 类型值才做导航,但是组件不检查路径正确性
linkType String 链接跳转类型,可选值为 navigateToredirectToswitchTabreLaunch
onlyTapFooter Boolean false 只有点击 footer 区域才触发 tab 事件
bindtap EventHandle 点击 cell 时触发,onlyTapFootertrue 时点击 footer 区域触发

可用的 slot

名称 是否必须 默认 描述
默认 左侧除了 titlelabel 外的自定义 wxml 内容
icon 标题前自定义的 icon可使用 icon 自定义组件,具体使用参考 icon 组件
footer 右侧自定义 wxml 内容,如果设置了 value 属性,则不生效

cell 组

多个 cell 组件必须作为 cell-group 组件的子组件,否则可能出现显示问题。

单个 cell 使用示例

  {
    ...
    "usingComponents": {
      "zan-cell": "../../dist/cell/index",
    }
    ...
  }
  <zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>

cell 组使用示例

  {
    ...
    "usingComponents": {
      "zan-cell": "../../dist/cell/index",
      "zan-cell-group": "../../dist/cell-group/index"
    }
    ...
  }
  <zan-cell-group>
    <zan-cell title="只显示箭头" is-link="{{true}}"></zan-cell>
    <zan-cell title="跳转到首页" is-link="/pages/dashboard/index"></zan-cell>
    <zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
    <zan-cell title="表单">
      <input slot="footer" type="digit" placeholder="带小数点的数字键盘"/>
    </zan-cell>
    <zan-cell title="开关">
      <switch slot="footer" checked/>
    </zan-cell>
  </zan-cell-group>