小程序开发框架

# mx-grid 卡片图标

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

# 引入

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

"usingComponents": {
  "mx-grid": "/miniprogram_npm/m-ui/mx-grid/index"，
  "mx-grid-item": "/miniprogram_npm/m-ui/mx-grid-item/index"，
  "mx-grid-card-item": "/miniprogram_npm/m-ui/mx-grid-card-item/index"
}

# 小程序码

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

#

# 代码演示

# 基本用法

可以通过mx-grid-card-item组件来设置固定卡片类型，type可选big和small,value为卡片的值，unit为卡片的单位，describe为卡片描述。

 <mx-row gutter="10">
      <mx-col span="12">
        <mx-panel custom-class="row-layout row-layout-two">
          <mx-grid-card-item value="-2" type="big" describe="冷藏室" unit="°C"></mx-grid-card-item> </mx-panel
      ></mx-col>
      <mx-col span="12">
        <mx-panel custom-class="row-layout row-layout-two"
          ><mx-grid-card-item value="-17" type="big" describe="冷冻室" unit="°C"></mx-grid-card-item></mx-panel
      ></mx-col>
    </mx-row>

# 小卡片

<mx-grid column-num="2">
      <mx-grid-item use-slot>
        <mx-grid-card-item value="0" type="small" describe="昨日开关门次数" unit="次"></mx-grid-card-item
      ></mx-grid-item>
      <view class="vertical-line"></view>
      <mx-grid-item use-slot>
        <mx-grid-card-item value="100" type="small" describe="昨日节能指数" unit="分"></mx-grid-card-item
      ></mx-grid-item>
    </mx-grid>

# 自定义列数

<mx-grid column-num="3">
  <mx-grid-item icon="photo-o" text="文字" wx:for="{{ 6 }}" />
</mx-grid>

# 自定义内容

通过插槽可以自定义格子展示的内容。

<mx-grid column-num="3" border="{{ false }}">
  <mx-grid-item use-slot wx:for="{{ 3 }}" wx:for-item="index">
    <image
      style="width: 100%; height: 90px;"
      src="demo.jpg"
    />
  </mx-grid-item>
</mx-grid>

# 正方形格子

设置square属性后，格子的高度会和宽度保持一致。

<mx-grid square>
  <mx-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}" />
</mx-grid>

# 格子间距

通过gutter属性设置格子之间的距离。

<mx-grid gutter="{{ 10 }}">
  <mx-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}" />
</mx-grid>

# 内容横排

将direction属性设置为horizontal，可以让宫格的内容呈横向排列。

<mx-grid direction="horizontal" column-num="2">
  <mx-grid-item icon="photo-o" text="文字" />
  <mx-grid-item icon="photo-o" text="文字" />
  <mx-grid-item icon="photo-o" text="文字" />
</mx-grid>

# API

# Grid Props

参数 说明 类型 默认值
column-num 列数 number 4
icon-size 图标大小，默认单位为px string 28px
gutter 格子之间的间距，默认单位为px string,number 0
border 是否显示边框 boolean true
center 是否将格子内容居中显示 boolean true
square 是否将格子固定为正方形 boolean false
clickable 是否开启格子点击反馈 boolean false
direction 格子内容排列的方向，可选值为 horizontal string vertical
info 图标右上角提示信息 string、number -
reverse 是否调换图标和文本的位置 boolean false
use-slot 是否使用自定义内容的插槽 boolean false

# GridCardItem Props

参数 说明 类型 默认值
value 值 string -
unit 单位 string -
describe 描述 string -
type 类型。可选值big``small string big

# GridItem Props

参数 说明 类型 默认值
text 文字 string -
icon 图标名称或图片链接 string -
icon-color 图标颜色 string -
icon-prefix 第三方图标前缀 string mx-icon
dot 是否显示图标右上角小红点 boolean false
badge 图标右上角徽标的内容 string,number -
url 点击后跳转的链接地址 string -
link-type 链接跳转类型，可选值为 redirectTo switchTab reLaunch string navigateTo

# Grid 外部样式类

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

# GridItem Events

事件名 说明 参数
bind:click 点击格子时触发 -

# GridItem 外部样式类

名称 说明
custom-class 根节点样式类
content-class 内容样式类
icon-class 图标样式类
text-class 文本样式类

# GridItem Slots

名称 说明
- 自定义宫格的所有内容，需要设置use-slot属性
icon 内容样式自定义图标，如果设置了use-slot或者icon属性则不生效类
text 自定义文字，如果设置了use-slot或者text属性则不生效

← 滑动单元格（swipe-cell） →