支付宝小程序结果类组件 异常页·Page-result

异常组件，主要分为全局异常与局部异常。

全局异常组件：提供了可爱的蚂蚁形象作为异常场景的反馈提示，包括网络问题和服务器问题，同时提供了对应的处理按钮。

局部异常组件：用于页面某个区块出现异常时的反馈提示，同时提供了对应的处理按钮。

   "page-result": "mini-ali-ui/es/page-result/index"
 }
}
<page-result
 type="network"
 title="网络不给力"
 brief="世界上最遥远的距离莫过于此"
 footer="{{footer}}"
 onTapLeft="onTapLeft"
 onTapRight="onTapRight"
/>
Page({
 data: {
   footer: [{
     text: '修复',
   }, {
     text: '刷新',
   }],
 },
 onTapLeft(e) {
   console.log(e, 'onTapLeft');
 },
 onTapRight(e) {
   console.log(e, 'onTapRight');
 },
});

倒计时模式，10 秒后可点击按钮（与 native 规范一致）。

<!-- 倒计时模式 -->
<page-result
 type="busy"
 footer="{{footer}}"
 isCountDown="{{true}}"
 onTapLeft="onTapLeft"
/>

Page({
 data: {
   footer: [{
     text: '刷新',
   }],
 },
 onTapLeft(e) {
   console.log(e, 'onTapLeft');
 },
});

属性

Bug & Tip

• 异常组件新增五个非必选属性 footer、onTapLeft、onTapRight、isCountDown、countDownText；
• 组件提供默认 slot 的处理按钮（最多两个按钮），开发者也可自定义 slot 覆盖默认内容；
• 如需使用组件规范的处理按钮，请在 footer 中定义按钮的文案，配合 onTapLeft 和 onTapRight 方法，分别对应 footer[0] 和 footer[1] 的按钮实例（若只有一个按钮，只需定义 onTapLeft 属性）;
• 如需将操作按钮设置倒计时模式（仅一个按钮），可配置 isCountDown 属性，约定 10 秒的倒计时按钮（与 native 规范一致），默认文案为 10 秒后重新刷新，可通过 countDownText 配置替代 重新刷新 文案；
• 设置了倒计时模式，需要配合 footer 和 onTapLeft 属性定义倒计时后的处理按钮。