更新记录

1.0.4（2023-09-02）

1、优化一些显示的细节问题

1.0.3（2023-09-01）

1、新增动画、时间、颜色等相关属性

1.0.2（2023-08-31）

1、回滚到v1.0.0版本，暂时取消动画时间的修改属性

平台兼容性

x-skeleton

功能介绍

• 支持 H5、微信小程序，其他端未测试过
• 使用简单、灵活，高度自定义
• 加载时支持动画
• 消失时加了动画，不再生硬切换页面
• 支持绝大部分常用场景： 1、轮播图 2、个人信息 3、段落 4、菜单 5、列表 6、瀑布流 7、自定义...

属性说明

configs参数说明

大部分情况下，直接指定相应的 type 已经够用了，如果大家想进行样式的微调、完全自定义可通过设置 configs 来实现。

简单解释一下这些参数（右边有结构布局图示）：

布局总共分成 4 块，分别是 grid、item、head、text。

1、grid：包含 item，指定每一行有多少个 item，每一列有多少个 item

2、item：包含 head、text，可设置他们之间的排列方式、间距

3、head：一个 item 只有一个 head，可设置宽高、圆角

4、text：一个 item 可以有多行 text，可分别设置宽高、圆角、间距

使用示例

<x-skeleton type="banner" :loading="loading">
    <view>我是轮播图</view>
</x-skeleton>

export default {
    data() {
        return {
            loading: true,
        }
    },
    onLoad() {
        setTimeout(() => {
            this.loading = false;
        }, 2000);
    },
}

更多用法请下载查看示例代码，有问题可以留言