Cell单元格

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-cell": "/miniprogram_npm/vtuweapp/cell/item/vtu-cell"
    3. }
    4.

    代码演示

    基础用法

    1. <vtu-cell title="普通信息" value="显示内容" border content="详细的描述信息" bind:click="selectItem" data-label="111"></vtu-cell>
    2. <vtu-cell title="普通信息" value="显示内容" valueColor="#f44" border></vtu-cell>
    3. <vtu-cell title="徽章" border badge_value="10" ></vtu-cell>
    4.

    图标&箭头

    1. <vtu-cell title="普通信息" value="显示内容" icon="iconfont icon-kefu" border></vtu-cell>
    2. <vtu-cell title="普通信息" value="显示内容" icon="iconfont icon-kefu" icon-color="#1989fa" arrow content="详细的描述信息" border></vtu-cell>
    3. <vtu-cell title="普通信息" value="显示内容" icon="iconfont icon-kefu" border icon-color="#f5bf49" arrow></vtu-cell>
    4.

    微信开发能力

    1. <vtu-cell title="联系客服" icon="iconfont icon-kefu" border open-type="contact" arrow></vtu-cell>
    2. <vtu-cell title="意见反馈" icon="iconfont icon-kefu" border open-type="feedback" icon-color="#f5bf49" arrow></vtu-cell>
    3. <vtu-cell title="获取用户手机号" icon="iconfont icon-kefu" border open-type="getPhoneNumber" bind:getphonenumber="getPhoneNumber" arrow></vtu-cell>
    4. <vtu-cell title="获取用户信息" icon="iconfont icon-kefu" border open-type="getUserInfo" bind:getuserinfo="getUserInfo" arrow></vtu-cell>
    5. <vtu-cell title="转发" icon="iconfont icon-kefu" border open-type="share" arrow></vtu-cell>
    7. Page({
    8.   getUserInfo: function(e) {
    9.     wx.showToast({
    10.       title: "获取用户信息成功！",
    11.       icon: 'none',
    12.       duration: 2000
    13.     });
    14.     console.log("getUserInfo: ", e)
    15.   },
    17.   getPhoneNumber: function(e) {
    18.     wx.showToast({
    19.       title: "获取用户手机号成功！",
    20.       icon: 'none',
    21.       duration: 2000
    22.     });
    23.     console.log("getPhoneNumber: ", e)
    24.   }
    25. });
    26.  
    27.

    组件参数

    Props

    参数说明类型默认值必填
    title标题String-否
    title-color标题颜色String-否
    title-size标题字体大小String-否
    title-style标题区域样式String-否
    icon图标String-否
    icon-color图标颜色String-否
    icon-size图标大小String-否
    icon-style图标样式String-否
    border是否显示底部边框Boolean-否
    round是否为圆角Boolean-否
    disabled是否禁用Boolean-否
    arrow是否显示箭头Boolean-否
    height高度String45px否
    open-type微信开发能力String-否
    lang指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。String-否
    session-from会话来源，open-type="contact"时有效String-否
    send-message-title会话内消息卡片标题，open-type="contact"时有效String-否
    send-message-path会话内消息卡片点击跳转小程序路径，open-type="contact"时有效String-否
    send-message-img会话内消息卡片图片，open-type="contact"时有效String-否
    app-parameter打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效String-否
    show-message-card是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效String-否
    content详细描述信息String-否
    value右部文字内容String-否
    value-color右部文字颜色String-否

    Events

    方法名说明参数返回值
    bind:click点击按钮，且按钮状态不为加载或禁用时触发-绑定的参数对象
    bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息， 从返回参数的 detail 中获取到的值同 wx.getUserInfo-同 wx.getUserInfo
    bind:getphonenumber获取用户手机号回调-同 wx.getphonenumber
    bind:contact客服消息回调-同 wx.contact
    bind:error当使用开放能力时，发生错误的回调-同 wx.error
    bind:opensetting在打开授权设置页后回调-同 wx.opensetting
    bind:launchapp打开 APP 成功的回调，open-type=launchApp时有效-同 wx.launchapp

    Badge 徽章

    参数说明类型默认值必填
    badge_value显示值String-否
    badge_shape形状，bubble：气泡，dot：圆点Booleanbubble否
    badge_max最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型Number-否
    badge_is-dot小圆点，没有内容Booleanfalse否
    badge_color文字颜色-否
    badge_bg-color徽章背景色-否

    Slot插槽

    插槽名说明
    after单元格右部自定义内容

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Cell 单元格 - 图1