前端Vue加载中页面动画弹跳动画loading

前端Vue加载中页面动画弹跳动画loading, 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13091

效果图如下:


#### 使用方法

```使用方法

<!-- ref:唯一ref  top:距离中间顶部距离 -->

<cc-loading ref="mixLoad" :top="0"></cc-loading>

// 隐藏动画

this.$refs.mixLoad.hideAnimation();

```

#### HTML代码部分

```html

<template>

<view class="content">

<!-- ref:唯一ref  top:距离中间顶部距离 -->

<cc-loading ref="mixLoad" :top="0"></cc-loading>

</view>

</template>

<script>

export default {

data() {

return {

}

},

mounted() {

let mythis = this;

setTimeout(function() {

mythis.goHideAnimation();

}, 6000);

},

methods: {

goHideAnimation() {

console.log('隐藏动画');

this.$refs.mixLoad.hideAnimation();

}

}

}

</script>

<style>

.content {

display: flex;

flex-direction: column;

}

.shareView {

margin-top: 60px;

width: 100px;

height: 40px;

line-height: 40px;

text-align: center;

background-color: antiquewhite;

align-self: center;

}

</style>

```

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容