更新记录

1.0.2（2020-12-11）

• 修复了App端Cannot read property '_i' of undefined at view.umd.min.js:1的问题

1.0.1（2020-05-07）

• 修复了几个样式问题
• 增加了 textColor属性来指定字体颜色

1.0.0（2020-04-24）

2020/4/24 首次发布

目前兼容于

• H5
• 微信小程序

平台兼容性

Our-Loading

这是一款基于适用于H5和微信小程序端的自定义加载中组件😀😀😀

注意

本组件只在微信小程序和H5端测试过，如有问题请指正

预览

这里的内部样式需要你自己去改我的源码，我有标记好了，就是换个loader，其实就是改个组件就行，默认为shrinkRect

原因是uni-app和微信小程序不支持动态组件，如果以后支持，我就修改为自动配置不需要改源码

shrinkRect	loop	bounce	doubleBounce

doubleCube	doubleDot	rotatePlane	scaleOut

使用步骤

引入

全局引入（推荐）

在main.js里引入

// ......
import ourLoading from '@/components/our-loading/our-loading.vue'
Vue.component('ourLoading', ourLoading)
// ......

全局引入之后，直接在任何地方使用

局部引入

import ourLoading from '@/components/our-loading/our-loading.vue'

export default {
    components: { ourLoading }
}

使用

例子1：全屏使用（推荐）

<template>
  <div>
     <!--isFullScreen 可以实其全屏显示-->
    <ourLoading isFullScreen active text="loading..." />
  </div>
</template>

例子2：在某元素内使用

需要为那个元素设置宽高，并且设置为相对定位

<template>
  <div class='parent'>
    <ourLoading active text="loading..." />
  </div>
</template>
<style scoped>
    .parent {
        width: 100vw;
        height: 50vh;
        position: relative;  /* 注意需要为加载器定义一个相对定位的父容器 */
    }
</style>

例子3：自定义加载动画

<template>
    <view>
        <view class="parent">
            <our-loading active text="加载中...">
                <image class="img" src="../../static/loading.gif" mode="aspectFit" />
            </our-loading>
        </view>
    </view>
</template>

<script>
    import ourLoading from '@/components/our-loading/our-loading.vue'

    export default {
        components: { ourLoading }
    }
</script>

<style lang="scss">
.parent {
    width: 100vw;
    height: 100vh;
    position: relative;  /* 注意需要为加载器定义一个相对定位的父容器 */
    .img {
        max-width: 30vw;
        height: 100rpx;
    }
}
</style>

效果如下：

自定义加载动画

可配参数