安装

tnpm install --save @alipay/mas-grid-entry

组件介绍

小程序宫格入口组件 mas-grid-entry，入口 icon 支持普通图片格式或 iconfont 格式，针对宫格数量不同自动调整布局

参数说明

属性 | 必填 | 参数类型 | 参数说明 | 默认值 --- | ----- | ----- | ----- | ------ title | 是 | string | 标题 | '' moreText | 否 | string | 更多功能入口文案，默认'更多'， 传 '' 则不展示，此时插槽 topRight 生效 | '更多' moreLink | 否 | string | 更多功能入口链接 | '' moreReddot | 否 | boolean | 更多功能是否透出红点 | false entries | 否 | entry[] | 功能菜单列表 | [] columns | 否 | number | 自定义每行展示的元素个数，设置了该参数后不支持横向布局 | - size | 否 | string 或 number | 如果是普通图片设置后 image 宽高为 size * size，默认 css 设置为 64 * 64 通过，如果使用的是 iconfont，设置后 iconfont 的 fontSize 为 size，默认css 设置为 48 | '' onMoreClick | 否 | (event: any) => void | 更多按钮点击事件的回调 | - onEntryClick | 否 | (event: any, index: number, item: Iprops) => void | 入口菜单的点击的回调 | - onFirstShow | 否 | (event: any) => void | 组件首次出现回调 | - onShow | 否 | (event: any) => void | 组件从可见变为不可见时回调 | - onEntryFirstShow | 否 | (event: any, index: number, item: Iprops) => void | 小的入口菜单首次出现的回调 | - onEntryShow | 否 | (event: any, index: number, item: Iprops) => void | 小的入口菜单从可见变为不可见时回调 | -

Badges

[![install size][install-size-image]][install-size-url]

entry 详解

参数名称 | 必填 | 参数类型 | 参数说明 | 默认值 --- | ----- | ----- | ----- | ------ src| 否 | string | 普通图标链接，设置了 src再设置 fontClass 无效 | '' fontClass | 否 | string | iconfont 类名，仅支持 Font class 方式使用 iconfont，字体大小可以通过上述 fontSize 进行修改 | '' title | 是 | string | 标题，默认最多展示四个汉字，超出省略，可以通过 css 样式覆盖的形式调整 | '' link | 是 | string | 跳转链接 | '' disabled | 是 | boolean | 是否禁用 | '' reddot | 否 | boolean | 是否有红点 | false alertMessage | 否 | string | 右上角提醒信息。优先级大于 reddot，且不能为空 | ''

slot

name | 说明 --- | ----- topRight | 右上角插槽，在 moreText 为 '' 的时候生效，使用该插槽可以自定义右上角内容 footer | 底部插槽，可以将发现等模块内容内嵌到该组件中

在小程序中使用

在 page/index.json 中引用组件

{
  "usingComponents": {
    "mas-grid-entry": "@alipay/mas-grid-entry/es/index"
  }
}

在 page/index.axml 中使用组件

<view class="mas-grid-entry-container">
  <mas-grid-entry
    title="{{ title }}"
    moreText="{{ moreText }}"
    moreLink="{{ moreLink }}"
    entries="{{ entries }}"
    size="{{ size }}"

    onMoreClick="onMoreClick"
    onEntryClick="onEntryClick"
    onFirstShow="onFirstShow"
    onShow="onShow"
    onEntryFirstShow="onEntryFirstShow"
    onEntryShow="onEntryShow"
  >
    <view slot="topRight" class="top-right">
      <image class="certificates" src="https://gw.alipayobjects.com/mdn/rms_f0bad2/afts/img/A*B9EeRZ8m1rkAAAAAAAAAAABkARQnAQ"/>

      <text>我是 topRight slot</text>
    </view>

    <view slot="footer" class="footer">
      <image class="art-word" src="https://gw.alipayobjects.com/mdn/rms_cd276b/afts/img/A*qgrKSJ9_RYoAAAAAAAAAAABkARQnAQ"/>

      <view class="dividing-line"></view>

      <text>我是 footer slot</text>
    </view>
  </mas-grid-entry>
</view>

在 page/index.less 中引入字体图标

// 如果使用 iconfont 图标需要在线引入 iconfont 资源库
@import (less) "//at.alicdn.com/t/font_1724600_fpx2e8djl1f.css";

.a-page {
  width: 100%;
  box-sizing: border-box;
  padding: 12rpx;
  background-color: #fafafa;
}

// 标题默认最多展示 5 个汉字，超出折行，第二行超出出现省略号，可以通过 css 样式覆盖的形式调整
.mas-grid-entry-wrapper .entries-wrapper .entries .entry-item-title {
  width: 5em;
}

// 通过 css 样式覆盖的形式修改图标大小
.mas-grid-entry-wrapper .entries-wrapper .entries .entry-item-icon {
  width: 64rpx;
  height: 64rpx;
}

.top-right {
  display: flex;
  align-items: center;

  .certificates {
    width: 40rpx;
    height: 40rpx;
  }

  text {
    margin-left: 16rpx;
    font-size: 26rpx;
    color: #999;
  }
}

//  单行省略
.ellipsis {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.mas-grid-entry-wrapper {
  padding-bottom: 0;
}

.footer {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 98rpx;
  margin-top: 30rpx;
  border-top: 1rpx solid #eee;

  .art-word {
    width: 112rpx;
    height: 32rpx;
  }

  text {
    flex: 1;
    font-size: 24rpx;
    color: #666;

    .ellipsis();
  }

  .dividing-line {
    width: 1rpx;
    height: 16rpx;
    margin: 0 16rpx;
    background-color: #d8d8d8;
  }
}

page/index.js

  data: {
    /** 模块标题 */
    title: '模块标题',

    /** 更多按钮文案，默认为更多，为空字符串则不展示，也可以自定义 */
    moreText: '',

    /** 更多按钮跳转链接 */
    moreLink: 'https://render.alipay.com/p/f/jg78xsi9/index.html',

    /** 如果是普通图片设置后 image 宽高为 size * size，默认为 64 * 64，如果使用的是 iconfont，设置后 iconfont 的 fontSize 为 size，默认为 48 */
    size: '',

    /** 入口菜单列表 */
    entries: [
      {
        /** icon 链接 */
        src: 'https://gw.alipayobjects.com/mdn/rms_f0bad2/afts/img/A*4QedQpoCyokAAAAAAAAAAABkARQnAQ',

        /** 标题 */
        title: '话费查询',

        /** 跳转链接 */
        link: 'https://render.alipay.com/p/f/jg78xsi9/index.html',
      },
      {
        /** icon 链接 */
        src: 'https://gw.alipayobjects.com/mdn/rms_f0bad2/afts/img/A*e2P5SLSUjjMAAAAAAAAAAABkARQnAQ',

        /** 标题 */
        title: '宽带办理',

        /** 跳转链接 */
        link: 'https://render.alipay.com/p/f/jg78xsi9/index.html',
      },
      {
        /** icon 链接 */
        src: 'https://gw.alipayobjects.com/mdn/rms_f0bad2/afts/img/A*XQh3S4Xp5I0AAAAAAAAAAABkARQnAQ',

        /** 标题 */
        title: '套餐服务',

        /** 跳转链接 */
        link: 'https://render.alipay.com/p/f/jg78xsi9/index.html',
      },
      {
        /** icon 链接 */
        src: 'https://gw.alipayobjects.com/mdn/rms_f0bad2/afts/img/A*g5HFRYGFNr0AAAAAAAAAAABkARQnAQ',

        /** 标题 */
        title: '积分商城',

        /** 跳转链接 */
        link: 'https://render.alipay.com/p/f/jg78xsi9/index.html',
      },
      {
        /** icon 链接 */
        src: 'https://gw.alipayobjects.com/mdn/rms_f0bad2/afts/img/A*-PvLQp-4jcAAAAAAAAAAAABkARQnAQ',

        /** 标题 */
        title: '更多服务',

        /** 跳转链接 */
        link: '',
      },
    ],
  },

  onMoreClick(event) {
    console.log('onMoreClick', event);
  },

  onEntryClick(event, index, item) {
    console.log('onEntryClick', event, index, item);
  },

  onFirstShow(event) {
    console.log('onFirstShow', event);
  },

  onShow(event) {
    console.log('onShow', event);
  },

  onEntryFirstShow(event, index, item) {
    console.log('onEntryFirstShow', event, index, item);
  },

  onEntryShow(event, index, item) {
    console.log('onEntryShow', event, index, item);
  },
});