介绍

小卡片可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-tabcard": "/miniprogram_npm/m-ui/mx-tabcard/index",
  "mx-small-card": "/miniprogram_npm/m-ui/mx-small-card/index",
}

小程序码

可使用微信扫码查看小程序码

#

代码演示

基本用法

 <mx-tabcard>
  <view wx:for="{{arr}}" wx:key="*this" class="item">
   <mx-small-card 
    icon="{{arr.icon}}" 
    label="{{arr.label}}" 
     bindonCardClicked="cardClicked">
   </mx-small-card>
   </view>
 </mx-tabcard>

Page({
  data: {
    arr: [
      {
        icon: '/assets/image/example/small-card/smallcard_ic_zhenqi@2x.png',
        label: '蒸汽',
      },
      {
        icon: '/assets/image/example/small-card/smallcard_ic_zhenqi@2x.png',
        label: '烧烤',
      },
    ],
  },
 
 cardClicked(e) {
    let {
      label
    } = e.detail
    wx.showToast({
      icon: 'none',
      title: `您点击了${label}卡片`,
    })
  },
});

存在内容描述

describe 补充展示内容

<mx-tabcard>
  <view wx:for="{{arr}}" wx:key="*this" class="item">
  <mx-small-card 
   icon="{{arr.icon}}" 
   label="{{arr.label}}" 
   describe="{{arr.describe}}"
   bind:onCardClicked="cardClicked">
 </mx-small-card>
  </view>
 </mx-tabcard>

Page({
  data: {
    arr: [
      {
        icon: '/assets/image/example/small-card/smallcard_ic_zhenqi@2x.png',
        label: '蒸汽',
        describe: '102分钟'
      },
      {
        icon: '/assets/image/example/small-card/smallcard_ic_zhenqi@2x.png',
        label: '烧烤',
        describe: '70分钟'
      },
    ],
  },
 
});

三个小卡片的布局

这里需要加一个 type="mini" 的参数

<mx-tabcard>
  <view wx:for="{{arr}}" wx:key="*this" class="item">
<mx-small-card 
  type="mini"
  icon="{{arr.icon}}" 
  label="{{arr.label}}" 
  describe="{{arr.describe}}"
  bind:onCardClicked="cardClicked">
</mx-small-card>

卡片被选中的UI展示（一行2个卡片布局）

这里需要同 mx-tabcard 组件配合使用，mx-small-card 需要 use-check 参数

<mx-tabcard use-check checked="{{ checked1 }}" data-key="checked1" bind:change="onChange">
  <view wx:for="{{list}}" wx:key="*this" class="item">
    <mx-small-card
      icon="{{item.icon}}"
      label="{{item.label}}"
      describe="{{item.describe}}"
      bind:click-button="parameterSetting"
    ></mx-small-card>
  </view>
</mx-tabcard>

Page({
  data: {
    checked1: 0,
    arr: [
      {
        icon: '/assets/image/example/small-card/smallcard_ic_zhenqi@2x.png',
        label: '蒸汽',
        describe: '102分钟'
      },
      {
        icon: '/assets/image/example/small-card/smallcard_ic_zhenqi@2x.png',
        label: '烧烤',
        describe: '70分钟'
      },
    ],
  },

  parameterSetting(e) {
    console.log(e.detail)
  },

  onChange(event) {
    console.log(event.detail)
    const {
      key
    } = event.currentTarget.dataset;
    this.setData({
      [key]: event.detail
    });
  },
 
});

被选中的卡片图标、设置参数按钮自定义颜色（一行2个卡片布局）

这里需要同 mx-tabcard 组件配合使用；mx-small-card 需要 use-check 参数

<mx-tabcard use-check  checked="{{ checked1 }}" data-key="checked1" bind:change="onChange">
  <view wx:for="{{list}}" wx:key="*this" class="item">
    <mx-small-card
      icon="{{item.icon}}"
      label="{{item.label}}"
      describe="{{item.describe}}"
      bind:click-button="parameterSetting"
    ></mx-small-card>
  </view>
</mx-tabcard>

<mx-tabcard
  checked-color="#FFAA10"
  checked-button-color="#ffaa102b"
  checked="{{ checked2 }}"
  data-key="checked2"
  use-check
  bind:change="onChange"
>
  <view wx:for="{{list}}" wx:key="*this" class="item">
    <mx-small-card
      icon="{{item.icon}}"
      label="{{item.label}}"
      describe="{{item.describe}}"
      bind:click-button="parameterSetting"
    ></mx-small-card>
  </view>
</mx-tabcard>

被选中的卡片图标、设置参数按钮自定义颜色（一行3个卡片布局）

这里需要同 mx-tabcard 组件配合使用；mx-small-card 需要 use-check 参数

<mx-tabcard 
  checked-color="#86696B"
  checked-button-color="#86696b2e"
  checked="{{ checked1 }}" 
  data-key="checked1" 
  bind:change="onChange">
  <view wx:for="{{list}}"  type="mini" use-check wx:key="*this" class="item">
    <mx-small-card
      icon="{{item.icon}}"
      label="{{item.label}}"
      describe="{{item.describe}}"
      bind:click-button="parameterSetting"
    ></mx-small-card>
  </view>
</mx-tabcard>

API

small-card Props

参数	说明	类型	默认值
type	卡片大小类型，可选值 normal、mini	string	normal
icon	卡片中图片链接	string	-
label	卡片中文本	string	-
describe	卡片中对文本的补充描述	string	-

small-card Event

事件名	说明	回调参数
bind:click-button	设置参数按钮点击事件	e.detail: 当前卡片的数据对象
bind:onCardClicked	卡片点击事件	e: 当前卡片的数据对象

tabcard Props

参数	说明	类型	默认值
checked	被选中的当前卡片（下标或其他唯一标志）	Number	-
checkedColor	UI：小卡片被选中的左上角（右上脚）图标颜色	string	#267AFF
checkedButtonColor	UI：小卡片被选中的左上角（右上脚）设置按钮颜色	string	#E9F1FF
zIndex	层级	Number	1
useCheck	卡片是否需要选中展示的样式	Boolean	false
type	卡片类型，可选值 normal，mini	String	normal
show-setting	当卡片为选中类型时，是否需要展示设置按钮	Boolean	true

tabcard Event

事件名	说明	回调参数
bind:change	卡片点击事件	e.detail: 当前卡片的数据