美文网首页uni-appWEB前端程序开发让前端飞
前端Vue加载中页面动画弹跳动画loading

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

作者: 前端组件分享 | 来源:发表于2023-06-18 09:22 被阅读0次

前端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>

```

相关文章

网友评论

    本文标题:前端Vue加载中页面动画弹跳动画loading

    本文链接:https://www.haomeiwen.com/subject/ksidydtx.html