@mas.io/mas-grid-entry v0.2.0

安装

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

组件介绍

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

参数说明

Badges

entry 详解

slot

在小程序中使用

在 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);
  },
});