安装

tnpm install --save @alipay/adc-page-container

组件介绍

行业小程序页面骨架屏效果组件,在需要等待加载内容的位置提供一个占位图形组合, 加载内容异常时显示异常图标占位符，此异常页面是增强了 小程序开发组件拓展组件 Page-result 异常页组件的功能：用户可以自定义异常页面的图标

参数说明

| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 | | ------------------ | ---- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------------------------ | | className | 否 | string | 自定义样式名称 | -- | -- | | exceptionClassName | 否 | string | 异常页面的自定义样式 | -- | exceptionClassName | | type | 否 | string | 异常页面类型, 可选值:加载失败 default,网络异常 network,服务繁忙 busy,服务异常 error,空状态 empty,用户注销 logoff,付款失败 payment,红包领空 redpacket | default | network | | local | 否 | boolean | 是否是局部异常内容 | false | false | true | | title | 否 | string | 错误提示标题（最多一行） | 默认文案 | 数据加载失败 | | brief | 否 | string | 错误提示简要（最多两行） | 默认文案 | 待会来试试 | | footer | 否 | Array[{text}] | 错误处理按钮文案（一个或两个按钮） | -- | [{ text:'刷新'},{text:'重试'}] | | onTapLeft | 否 | EventHandle | （左侧）按钮事件处理函数 | () =>{} | (e)=>{console.log(e)} | | onTapRight | 否 | EventHandle | （右侧）按钮事件处理函数 | () =>{} | (e)=>{console.log(e)} | | isCountDown | 否 | boolean | 是否设置倒计时模式 | false | true | | countDownText | 否 | string | 倒计时提示的文案 | -- | 重新刷新 | | countDownTimes | 否 | number | 倒计时时间, 单位: 秒 | 5 | 3 |

Slot

| Name | 说明 | 是否必传 | | ------- | -------- | -------- | | default | 页面内容 | 是 |

在小程序中使用

{
  "usingComponents": {
    "mas-adc-page-container": "@alipay/adc-page-container/es/index"
  }
}

在 page.axml 中引用组件

<mas-adc-page-container 
loading="{{loading}}"
skeletonShowTitle="{{skeletonShowTitle}}"
skeletonShowAvatar="{{skeletonShowAvatar}}"
skeletonRow="{{skeletonRow}}"
expError="{{expError}}"
onTapLeft="reLoadData"
onTapRight="reLoadData"
footer="{{footer}}"
type="{{type}}"
isCountDown
countDownText="刷新文本"
countDownTimes="{{7}}"
> 
  <view>
    我是页面加载的数据.....
  </view>
</mas-adc-page-container> 

在page.js 中需要注册方法

Page({
  data: {
    skeletonShowTitle: true,
    skeletonShowAvatar: false,
    skeletonRow: 10,
    expError: false,
    loading: true,
    footer: [{
      text: '刷新',
    }],
    type: 'default',
    types: ['default', 'network', 'busy', 'error', 'empty', 'logoff', 'payment', 'redpacket'],
  },
  onLoad() {
    this.loadData();
  },
  onTapExpBtn() {
    this.reLoadData();
  },
  loadData() {
    setTimeout(() => {
      this.setData({
        loading: false,
        expError: true,
      });
    }, 1000);
  },
  reLoadData() {
    this.setData({
      loading: true,
      expError: false,
    });
    setTimeout(() => {
      this.setData({
        loading: false,
        expError: true,
        type: this.data.types[Math.floor(Math.random() * 7)],
      });
    }, 1000);
  },

});

Tip

• footer 中定义按钮的文案，配合 onTapLeft 和 onTapRight 方法，分别对应 footer[0] 和 footer[1] 的按钮实例（若只有一个按钮，只需定义 onTapLeft 属性）。
• 如需将操作按钮设置倒计时模式（仅一个按钮），可配置 isCountDown 属性，默认文案为 5 秒后重新刷新，可通过 countDownText 配置替代 重新刷新 文案。
• 设置了倒计时模式，需要配合 footer 和 onTapLeft、onTapRight 属性定义倒计时后的处理按钮。

Badges