MinUI组件之abnor异常流组件详解

MinUI 组件库包含了很多功能组件，其中 abnor 异常流组件是一个很常用的功能性组件， MinUI 中 abnor 组件的效果图如下：

下面介绍 abnor 组件的使用方式。

1、使用下列命令安装 Min-Cli，如已安装，请进入到下一步。Min-Cli 的文档请猛戳这里：Min-Cli使用手册

npm install -g @mindev/min-cli

2、初始化一个小程序项目。

min init my-project

选择 新建小程序 选项，即可初始化一个小程序项目。创建项目后，在编辑器中打开项目，src 目录为源码目录，dist 目录为编译后用于在微信开发者工具中指定的目录。新建的项目中已有一个 home 页面。详细文档：Min 初始化小程序项目

3、安装 abnor 组件。

进入刚才新建的小程序项目的目录中：

cd my-project

安装组件：

min install @minui/wxc-abnor

4、开启dev。

min dev

开启之后，修改源码后都会重新编译。

5、在页面中引入组件。

在编辑器中打开 src/pages 目录下的 home/index.wxp 文件，在 script 中添加 config 字段，配置小程序自定义组件字段，代码如下：

export default {
    config: {
        "usingComponents": {
            &＃39;wxc-abnor&＃39;: "@minui/wxc-abnor"
        }
    }
}

wxc-abnor 即为异常流组件的标签名，可以在 wxml 中使用。

6、在 wxml 中使用 wxc-abnor标签。

在 home/index.wxp 文件的 template 中添加 wxc-abnor 标签，代码如下：

7、打开微信开发者工具，指定 dist 目录，预览项目。

home/index.wxp 文件的代码如下所示：

图示：

bindabnortap[说明]：按钮事件。若配置了 button 属性，则需要指定事件。其中 REQUEST_ERROR, NOT_FOUND 两种 type 中均设置了默认的按钮文案

更多demo

1、网络异常

图示：

2、页面不存在

图示：

3、自定义数据

图示：

4、空数据状态

图示：

5、无关注数据

图示：

6、无反馈数据

图示：

7、无搜索数据

图示：

8、无消息通知

图示：

9、空订单列表

图示：

10、空购物车

图示：

11、空足迹

图示：

12、无优惠券数据

图示：

载入中...

以上就是MinUI 组件之 abnor异常流组件详解的详细内容，更多请关注其它相关文章！