更新记录

1.0.0（2021-02-01）

• 发布1.0.0版本

平台兼容性

骨架屏(ls-skeleton)

可自定义骨架内容结构的骨架屏插件，支持 H5 vue nvue 微信小程序。

插件体积小，用法简单，几行代码即可实现你想要的效果。

说明

用于在弱网情况下，客户端获取到服务器数据的时间比较长，在内容加载出来前展示与内容布局结构一致的灰白块，提升用户视觉体验。

用法示例

<template>
    <ls-skeleton :skeleton="skeleton" :loading="loading">
        <view>好的，页面加载完了</view>
    </ls-skeleton>
</template>

import lsSkeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
export default {
    components: {
        lsSkeleton
    },
    data() {
        return {
            loading: true,
            skeleton: [
                    'line-sm*3',
                    40,
                    'card',
                    'circlesm*2',
                    'line',
                    'card-lg',
                    40,
                    'news',
                    'line-sm*3+square',
                ],
        }
    },
    onLoad() {
        // 模拟接口请求
        setTimeout(() => {
            this.loading = false;
        }, 4000)
    },
}

组件参数

skeleton参数用法说明

skeleton接收一个数组，数组中的配置项就是骨架屏实际在页面中显示的内容，配置项分为两种数据类型：

• 字符串类型 String: 其中-sm结尾的表示小号、-lg结尾的表示大号、默认中号

  • line line-sm line-lg 段落结构
  • card card-sm card-lg 方块结构
  • circle circle-sm circle-lg 圆形结构
  • square square-sm square-lg 正方形结构
  • * 乘法符号，后边接数字代表重复几个 例如：line*4 代表出现4个段落格式骨架
  • + 横向并列布局链接符号 例如：squaresm*3 表示左侧一个正方形右侧三个段落结合的骨架，类似于新闻资讯列表图文结合结构
  • news（自定义扩展）新闻资讯图文结构格式

    这个格式实际上是不需要的，加上它的目的是为了给使用者一个扩展自定义结构的代码示例。具体扩展方式在插件源码中有详细的注明。扩展时请在插件ls-skeleton.nvue中搜索“自定义扩展说明”

• 数值型 Number: 代表垂直间隔。 例如：40 表示40的前后之间有一个40rpx高度的间隔

插槽slot用法说明

组件内部接收一个插槽，插槽的内容就是原本页面加载结束后应该显示的内容，例如：我的页面中，用户姓名和头像需要从服务器获取，在获取数据时，展示骨架屏：

<ls-skeleton :skeleton="skeleton" :loading="loading" ref="skeleton">
    <!-- 这里建议在最外层包裹一个没有指定class的view，不然由于css样式作用域的问题可能会出现最外层class样式不生效的问题 -->
    <view>
        <view class="flex">
            <image :src="avatar" class="avatar"></image>
            <view class="info">
                <view>
                    <text class="nickname">恭喜发财</text>
                </view>
                <view>
                    <text class="des">这个人很懒，懒得写个性签名</text>
                </view>
            </view>
        </view>
    </view>
</ls-skeleton>

而骨架屏部分，由于上方用户信息采用的是，左侧展示头像右侧展示用户名和个性签名的左右并列布局，所以骨架屏的配置可以是这样：

skeleton: [
        'circlesm*2', // 这里的+号即实现了左侧头像和右侧用户名和个性签名的布局
    ],

组件方法

综合使用时的页面效果

谢谢