更新记录

1.0.2（2019-06-28） 下载此版本

示例样式忘记给了^-^

1.0.1（2019-06-28） 下载此版本

更新一个载入先后顺序造成的错误

用法参考index.vue

平台兼容性

skeleton

绘制uniapp骨架屏，轻量、方便、快捷

快速上手

引入骨架屏组件

//index.json
//引入骨架屏组件(以我本地地址为例，具体地址由自身引用位置决定)
import skeleton from "../../components/skeleton/skeleton.vue";
//页面使用js部分
export default {
    data() {
        return {
            motto: 'Hello World',
            userInfo: {
                avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/s4RzXCAQsVNliaJXtHBvdpAkeRwnK7Jhiaf9mzuVqEhZza3zSYM7tJ1xZCQE9SCoOR8qjVEjDKltw1SQnxyicWq6A/132',
                nickName: 'jayzou'
            },
            lists: [
                '第1行数据',
                '第2行数据',
                '第3行数据',
                '第4行数据',
                '第5行数据',
                '第6行数据'
            ],
            showSkeleton: true  //骨架屏显示隐藏
        };
    },
    components: {
        skeleton
    },
    onLoad: function () {
    },
    /**
     *  页面载入完成后调用子组件的方法生成预加载效果
     */
    onReady:function(){
        const that = this;

        that.$refs.skeleton.attachedAction();

        that.$refs.skeleton.readyAction();

        setTimeout(() => {
            that.showSkeleton = false;
        }, 2000);
    }
}

<template>
    <view class="controller">
        <!--引用组件-->
        <skeleton v-if="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton>
        <view class="container skeleton">
            <view class="userinfo">
                <block>
                    <!--skeleton-radius 绘制圆形-->
                    <image class="userinfo-avatar skeleton-radius" :src="userInfo.avatarUrl" mode="cover"></image>
                     <!--skeleton-rect 绘制矩形-->
                    <text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
                </block>
            </view>
            <view style="margin: 20px 0">
                <view v-for="(item,index) in lists" :key="index" class="lists">
                    <text class="skeleton-rect">{{item}}</text>
                </view>
            </view>

            <view class="usermotto">
                <text class="user-motto skeleton-rect">{{motto}}</text>
            </view>
        </view>
    </view>
</template>