当前位置: 首页>大数据>正文

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

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

效果图如下:

前端Vue加载中页面动画弹跳动画loading,第1张
前端Vue加载中页面动画弹跳动画loading,第2张

#### 使用方法

```使用方法

<!-- 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>

```


https://www.xamrdz.com/bigdata/7hy1995040.html

相关文章: