更新记录

v0.2(2024-01-26) 下载此版本

通过slot ,并设置slot中标签的skel属性值为1作为标记,skel为1时视为骨架div

v0.1(2020-11-19) 下载此版本


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

骨架屏

简单的介绍一下 首先正常引入组件,此处略 将标签放入组件中,我组件的命名是skeleton 废话不多说,一行代码胜过千言万语

<skeleton>
    <view skeleton="true" >渲染</view>
    <view skeleton="false" >不渲染,display:none</view>
    <view skeleton-class="my-class" ></view>
</skeleton>
<style>
.my-skeleton-class{
    /*这是一个默认的样式,js自动添加到有 skeleton="true"  属性的标签中 ,
      最好是放在全局,这样所有页面的组件就都能用到。*/
    background-image:unset;
    box-shadow: unset;
    border: #C0C0C0;
    border-radius: 0.25rem;
    animation: mybgcolor 1s linear 0s infinite normal;
}
@keyframes mybgcolor
{
    0%{background-image: linear-gradient(to right ,#C0C0C0, rgb(230,230,230), rgb(230,230,230) );}
    50%{background-image: linear-gradient(to right, rgb(230,230,230),#C0C0C0,  rgb(230,230,230));}
    100%{background-image: linear-gradient(to right,   rgb(230,230,230), rgb(230,230,230),#C0C0C0);}
}
.my-class{
    /*这里写你想添加上去的样式,没有限制 是直接setAttir上去的,嘻嘻*/
}
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问