@mas.io/adc-page-container NPM

安装

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

Badges

@mas.io/mas-skeleton @whale.io/mini

@infinitebrahmanuniverse/nolb-_mas @everything-registry/sub-chunk-583

1.0.0

2 years ago