更新记录

2.0.4（2021-02-07）

• 新增 animation参数，支持多种加载动画效果
• 新增 under-color参数，指定底层文字颜色
• 新增 highlight-color参数，指定高亮文字颜色

2.0.3（2021-02-03）

修复H5上不显示加载文字的问题

2.0.2（2021-01-14）

修复微信小程序上不显示加载文字的问题

平台兼容性

说明

本组件通常用于页面数据需要异步加载时，为避免出现数据加载完毕之前页面上出现空数据的尴尬情况，显示loading层作为页面载入过渡。 使用时在想要使用的页面引入即可，它不会影响你页面中原有的布局。

插件引入前必看，重要！ 重要！ 重要！

如果你的项目是uni_modules规范可以点击[使用HBuilderX导入插件]直接引入

如果你的项目不是uni_modules规范，请点击[下载插件ZIP]到本地，手动解压后引入

以上两种使用方式均针对uni_modules版本，非uni_modules版本中的代码是老版本，不要下载了，引入或下载前请看好^-^

用法示例

<template>
    <view>
        <ls-loading text="now loading..." :animation="animation" v-if="pageLoading"></ls-loading>
        <!-- 下面照常写你的页面布局 -->
    </view>
</template>

// uni_modules规范模式下的引入方式：
import lsLoading from '@/uni_modules/ls-loading/components/ls-loading/ls-loading.vue';
// 非uni_modules规范模式下的引用方式：
// import lsLoading from '@/components/ls-loading/ls-loading.vue';
export default {
    components: {
        lsLoading
    },
    data() {
        return {
            pageLoading: true,
            animation: 'twinkle'
        }
    },
    onLoad() {
        // 这里模拟接口请求,接口请求成功后将pageLoading改为false
        setTimeout(() => {
            this.pageLoading = false;
        }, 3000);
    }
}

组件参数

animation参数说明

效果预览

1.文字闪烁效果

2.文字聚焦效果

3.模拟水位上涨效果

4.水平进度加载效果

5.文字跳动效果

联系作者

如有问题或建议欢迎在下方留言，也可以添加我的QQ：2424044437

谢谢