mx-tabbar-item 卡片图标

主要用于卡片状态展示状态的切换。

引入

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

"usingComponents": {
  "mx-tabbar-item": "/miniprogram_npm/m-ui/mx-tabbar-item/index"
}

小程序码

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

#

代码演示

基本用法

可以搭配layout组件 mx-col 和 mx-row 来进行排列布局。checked选中状态，inactive-color未选中标签的颜色，icon非选中时的图片。active-color选中标签的颜色，active-icon选中时的图标展示。最外层view也可以用mx-mx-cell-group组件，可以少些两行样式。

 <view class="card-item">
      <mx-row>
        <mx-col span="6"
          ><view>
            <mx-tabbar-item checked="{{ checked }}" icon="{{icon2}}" activeIcon="{{icon1}}" bind:change="onChange"
              >开关</mx-tabbar-item
            ></view
          ></mx-col
        >
        <mx-col span="6"
          ><view>
            <mx-tabbar-item checked="{{ checked1 }}" icon="{{icon4}}" activeIcon="{{icon3}}" bind:change="onChange1"
              >开关</mx-tabbar-item
            ></view
          ></mx-col
        >
        <mx-col span="6"
          ><view>
            <mx-tabbar-item checked="{{ checked2 }}" icon="{{icon6}}" activeIcon="{{icon5}}" bind:change="onChange2"
              >开关</mx-tabbar-item
            ></view
          ></mx-col
        >
        <mx-col span="6"
          ><view>
            <mx-tabbar-item checked="{{ checked3 }}" icon="{{icon8}}" activeIcon="{{icon7}}" bind:change="onChange3"
              >开关</mx-tabbar-item
            ></view
          ></mx-col
        >
      </mx-row>
    </view>

.card-item {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 20px 0 20px 0;
  box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.05)
}

.row-layout {
  margin-bottom: 20px;
}

Page({
  data: {
    icon1: '/assets/image/example/icon/icon1.png',
    icon2: '/assets/image/example/icon/icon2.png',
    icon3: '/assets/image/example/icon/icon3.png',
    icon4: '/assets/image/example/icon/icon4.png',
    icon5: '/assets/image/example/icon/icon5.png',
    icon6: '/assets/image/example/icon/icon6.png',
    icon7: '/assets/image/example/icon/icon7.png',
    checked: true,
    checked1: true,
    checked2: false,
    checked3: false,
  },
 onChange({ detail }) {
    console.log(detail)
    // 需要手动对 checked 状态进行更新
    this.setData({
      checked: detail,
    })
  },

  onChange1({ detail }) {
    console.log(detail)
    // 需要手动对 checked 状态进行更新
    this.setData({
      checked1: detail,
    })
  },

  onChange2({ detail }) {
    console.log(detail)
    // 需要手动对 checked 状态进行更新
    this.setData({
      checked2: detail,
    })
  },

  onChange3({ detail }) {
    console.log(detail)
    // 需要手动对 checked 状态进行更新
    this.setData({
      checked3: detail,
    })
  },

});

切换图标背景色

inactive-color非选中背景色，active-color选中时的背景色，通过inactive-color和active-color切换按钮的背景色。

<view class="card-item">
      <mx-row>
        <mx-col span="6"
          ><view>
            <mx-tabbar-item
              checked="{{ checked12 }}"
              icon="{{icon2}}"
              active-color="#FF6A4C"
              activeIcon="{{icon1}}"
              bind:change="onChange12"
              >开关</mx-tabbar-item
            ></view
          ></mx-col
        >
        <mx-col span="6"
          ><view>
            <mx-tabbar-item
              checked="{{ checked13 }}"
              icon="{{icon4}}"
              active-color="#E61E1E"
              activeIcon="{{icon3}}"
              bind:change="onChange13"
              >开关</mx-tabbar-item
            ></view
          ></mx-col
        >
        <mx-col span="6"
          ><view>
            <mx-tabbar-item
              checked="{{ checked14 }}"
              icon="{{icon6}}"
              active-color="#86696B"
              activeIcon="{{icon5}}"
              bind:change="onChange14"
              >开关</mx-tabbar-item
            ></view
          ></mx-col
        >
        <mx-col span="6"
          ><view>
            <mx-tabbar-item
              checked="{{ checked15 }}"
              icon="{{icon8}}"
              active-color="#29C3FF"
              activeIcon="{{icon7}}"
              bind:change="onChange15"
              >开关</mx-tabbar-item
            ></view
          ></mx-col
        >
      </mx-row>
    </view>

API

Props

参数	说明	类型	默认值
active-color	选中标签的颜色	string	#267AFF
inactive-color	未选中标签的颜色	string	#F2F2F2
active-icon	选中标签的图片	string	-
icon	未选中标签的图片	string	-
loading	是否加载状态	boolean	false
disabled	是否禁用	boolean	false
icon-prefix	图标类名前缀	string	mx-icon
dot	是否显示小红点	boolean	false
info	图标右上角提示信息	string、number	-
active-spc	是否预约	boolean	false
active-spc	是否预约	boolean	false
active-spc-color	预约关机时的颜色	string	-
active-spc-icon	预约关机时的图标	string	-

Event

事件名	说明	参数
bind:change	切换标签时触发	event.detail: 当前选中标签的名称或索引值

外部样式类

名称	说明
custom-class	根节点样式类