fs-weapp/cell

Cell 单元格

使用指南

  • 确保 components 下引入 behavors/router.js, icon、cell-group、cell组件
  • 在 app.json 或 index.json 中引入组件

{
  "usingComponents": {
    "fs-cell-group": "path/components/cell-group/index",
    "fs-cell": "path/components/cell/index"
  }
}
1
2
3
4
5
6
7

代码演示

  • 基础
<fs-cell-group>
  <fs-cell title="点击无反馈" no-border no-hover-class>
    <button>推送给我</button>
  </fs-cell>
  <fs-cell title="好友关注的基金推荐" describe="描述信息">
  </fs-cell>
</fs-cell-group>
1
2
3
4
5
6
7
  • 标题前带图片
<fs-cell-group>
  <fs-cell title="微信收款" title-img="https://dummyimage.com/60x60/509292/fff">
    <text class="text-grey">66.9</text>
  </fs-cell>
  <fs-cell class="custom" title="微信收款" describe="描述信息" title-img="https://dummyimage.com/60x60/509292/fff">
    <text class="text-grey custom-time">20:11</text>
  </fs-cell>
</fs-cell-group>
1
2
3
4
5
6
7
8
  • 自定义标题
<fs-cell-group>
  <fs-cell>
    <view slot="title">
      <fs-icon name="wechatpay" class="title-icon" />
      <text>微信收款</text>
    </view>
  </fs-cell>
  <fs-cell>
    <view slot="title">
      <fs-icon name="jdpay" class="title-icon" /><text>京东收款</text></view>
  </fs-cell>
  <fs-cell>
    <view slot="title">
      <fs-icon name="alipay" class="title-icon" /><text>支付宝收款</text></view>
  </fs-cell>
</fs-cell-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  • 跳转按钮
<fs-cell title="内链跳转" describe="描述信息" to="/pages/index/index" />
<fs-cell title="禁用" to="/pages/index/index" disabled />
1
2

CellGroup

属性

参数 说明 类型 默认值
custom-class 外部样式 String -
no-border 顶部/底部无border Boolean -
no-border-top 顶部/底部无border Boolean -
no-border-bottom 顶部/底部无border Boolean -

插槽

插槽名 说明
- 默认右侧内容

Cell

属性

参数 说明 类型 默认值
custom-class 外部样式 String -
no-border 顶部无分割线 Boolean -
no-hover-class 点击时无反馈 Boolean -
title 标题 String -
title-img 标题前的图片地址 String -
label 描述信息 String -
to 内部链接跳转 String -

插槽

插槽名 说明
- 默认右侧内容
title 标题
append 设置属性to或false后跳转图标前面额外的内容

← Stepper 步进器 →