更新记录

1.0.0(2024-02-23) 下载此版本

首次发布


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.99,Android:4.4,iOS:不确定,HarmonyNext:不确定 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

skeleton

自己项目非常需要骨架,正好原作者发布了1.0 根据自己项目 自己修改了下。

目前仅支持: 1.轮播图 2.分类栏 3.头像 4.文章条 5.动态心情

以上是根据自己项目修改的,后续再拓展,或者自己根据自己项目修改,原作者写的还是很灵活的,修改方便!

属性说明

属性名 类型 默认值 说明
loading Boolean true 是否显示占位图
imgTitle Boolean false 轮播图占位图
nameRow Number 1 显示头像圆1个
flexType String flex-start 排列方式 center 居中 √ space-between 两端对齐 √ space-around 子元素拉手分布 √ flex-start 居左 flex-end 居右
showAvatar Boolean true 是否显示头像占位图
avatarSize String 50px 头像站占位图大小
borderRadius String 25px 头像圆角大小
showTitle Boolean true 是否显示标题占位图
titleW Boolean true 是否显示标题
titleWidth String 40% 标题占位图宽度
row Number 3 标题段落占位图行数
flexDirection String row 排列方向 row 横向
animate Boolean true 是否开启动画

使用示例

<Skeleton :loading="loading" :row="4"  :showTitle="true"
:titleWidth="'48%'">
    带标题的段落
</Skeleton>
<Skeleton :loading="loading" :row="4"  :showTitle="true" :titleW="false"
:titleWidth="'48%'">
    带标题的段落
</Skeleton>
<Skeleton :loading="loading" flexType="space-between" avatarSizew="50px" avatarSize="50px" :nameRow="10"  :showAvatar="true">
    头像
</Skeleton>
<Skeleton :loading="loading" :imgTitle="true">
    轮播图等
</Skeleton>
import Skeleton from '@/components/L-skeleton/L-skeleton.uvue'
export default {
  components: {
    Skeleton
  },
  data() {
    return {
      loading: true
    }
  },
  created() {
    this.reloadData()
  },
  methods: {
    reloadData() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 3000)
    },
  },
}

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

暂无用户评论。

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