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

news2024/9/23 1:33:35

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

```

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/659038.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Postman大势已去,Apifox的时代已到来

目录 前言&#xff1a; 前情简介&#xff1a;亲身经历节选 Code: 403 “将我踢飞” 浓眉大眼的 Swagger 把我欺骗 工作提效的版本答案 为什么是Apifox 贴心为你 写在最后 前言&#xff1a; Apifox是一款基于web的API设计工具&#xff0c;提供了简洁明了的界面和丰富的…

Debezium系列之:Outbox Event Router

Debezium系列之&#xff1a;Outbox Event Router 一、认识Outbox Event Router二、使用发件箱模式进行可靠的微服务数据交换三、双写问题四、发件箱模式五、基于变更数据捕获的实现六、发件箱表七、发送事件到发件箱八、注册 Debezium 连接器九、主题路由十、Apache Kafka 中的…

交叉编译libcurl libosip libeXosip(包含openssl)

交叉编译libcurl ./configure --with-ssl/home/zx/zxapp/openssl-1.1.0l/output --without-zlib --enable-shared --enable-static --hostarm-linux-gnueabihf CCarm-linux-gnueabihf-gcc --prefix$PWD/build 交叉编译openssl ./config no-asm shared -fPIC --prefix/home/…

ColorUI 全网最全使用文档(建议收藏)

Color UI 我想大家都知晓吧&#xff0c;我就不过多阐述了&#xff0c;是 文晓港 大佬开发的一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值&#xff0c;高度自定义的 Css 组件库.&#xff0c;属于出道即巅峰的史诗级大作&#xff0c;众所周知&#xff0c;万物皆可 Color…

【CEEMDAN-CNN-LSTM】完备集合经验模态分解-卷积神经长短时记忆神经网络研究(Python代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【雕爷学编程】Arduino动手做(115)---HB100多普勒雷达模块

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…

思科交换机与路由器基础命令(二)

作者&#xff1a;Insist-- 个人主页&#xff1a;insist--个人主页 作者会持续更新网络知识和python基础知识&#xff0c;期待你的关注 目录 一、静态路由与默认路由配置命令 1、静态路由 2、默认路由 3、查看路由表 三、使用ping命令测试连通性 1、排除物理故障&#xff…

Revit AVF纹理UV处理

这一周结束得太快了……在我们进入周末之前&#xff0c;这里有一些引人注目的话题&#xff1a; 使用 AVF 解释纹理 UV 映射人体细胞的详细 3D 模型 推荐&#xff1a;用 NSDT设计器 快速搭建可编程3D场景。 1、使用 AVF 解释纹理 UV 映射 不久前在 Revit API 讨论论坛中提出了…

发现一个高颜值流程图 - 亿图图示

今天给各位小伙伴们测试了一款高颜值的流程图制作工具——亿图图示。 对了&#xff0c;它不仅可以制作流程图&#xff0c;还可以制作思维导图、组织结构图、泳道图等等哦。接下来让我们一起测试学习下吧 一、简单介绍 亿图图示&#xff08;Wondershare EdrawMax&#xff09;是…

Vue 项目 实现阻止浏览器记住密码功能

前言 通常浏览器会主动识别密码表单&#xff0c;在你登录成功之后提示保存密码 &#xff0c; 密码保存到浏览器的 密码管理器中 ( 如下是谷歌浏览器 ) 这种行为是浏览器的行为 &#xff0c;这种操作也是为了方便用户的使用 现在的一个需求是要阻止这个保存密码的弹窗提示 实现…

为什么中国一有创新,就被说套壳?

今天来说点有意思的。 大家有没有发现一个现象&#xff1f;无论是2021年的鸿蒙系统&#xff0c;还是2023年的文心一言。每次中国科技有比较重大&#xff0c;具有独创性&#xff0c;且能吸引舆论关注的创新之后&#xff0c;似乎注定会出现一种言论&#xff1a;这东西啊&#xff…

redis缓存设计-Redis(七)

上篇文章介绍了redisCluster。 redis集群-Redis&#xff08;六&#xff09;https://blog.csdn.net/ke1ying/article/details/131217674 高并发缓存应对策略 缓存穿透 正常情况下&#xff0c;用户访问某条数据&#xff0c;第一次从数据库获取&#xff0c;后面会set进缓存&…

《Web应用技术》期末复习,更新中...

Web应用技术期末复习 一、MVCMVC概述&#xff1a; 二、Spring&#xff1a;Spring概述:&#xff08;1&#xff09;依赖注入&#xff08;Dependency Injection&#xff09;&#xff1a;&#xff08;2&#xff09;控制反转&#xff08;Inversion of Control&#xff09;&#xff1…

Win11下配置OpenCV with CUDA

前些天在B站上看到用OpenCV调用CUDA加速目标检测和关键点检测的教程&#xff0c;较Pytorch推理速度提升很明显&#xff0c;最近整了个RTX4070&#xff0c;所以就也想来试一试。由于刚换了电脑&#xff0c;没有相关环境&#xff0c;配置过程中踩了一些坑&#xff0c;因此有了这篇…

立创EDA:(1)AB32VG1开发板画PCB笔记

文章目录 1.准备原理图1.1 原理图参考资料1.2 我的原理图1.2.1 引脚分配1.2.2 电源电路1.2.3Type-c口和USB转串口CH340N1.2.4 三色灯&#xff0c;红外接收器&#xff0c;蓝牙天线1.2.5 ADC按键电路1.2.6 SD卡电路1.2.7 耳塞&#xff0c;麦克风&#xff0c;FM天线1.2.8 功放电路…

期末速成之插入排序(一)

文章目录 1.&#x1f349;排序1.1&#x1f348;插入排序1.1.1 &#x1f34c;插入排序 &#x1f34c;1.1.2 希尔排序 1.&#x1f349;排序 &#xff08;本质&#xff1a;进行一个筛选&#xff09; 排序在生活中的应用&#xff1a; 1.1&#x1f348;插入排序 1.1.1 &#x1f3…

AN13189-移植

AN13189.pdf 2简介 本文件提供了从软件角度将基于PN7160 NXP NCI的NFC控制器集成到Android平台的指南。 它首先解释了如何安装所需的内核驱动程序&#xff0c;然后逐步描述了如何调整Android开源项目源代码以添加PN7160 NFC控制器的支持。图1显示了整个Android NFC堆栈的架构。…

【程序】基于simulink车辆动力学可视化仿真

一、前言 车辆动力学是研究汽车在行驶过程中的运动学和力学特性的学科。它研究车辆在不同路面条件、不同驾驶情况下的加速、制动、转向等运动状态&#xff0c;并通过建立数学模型来分析和优化车辆的性能和安全性。车辆动力学是汽车工程、机械工程和物理学等学科的交叉领域&…

基于SpringBoot的SSM整合案例 -- SpringBoot快速入门保姆级教程(四)

文章目录 前言1.设计创建数据库表tbl_book2.创建新的SpringBoot模块&#xff0c;勾选相关依赖3. 添加SpringBoot创建项目时没有提供的相关坐标4.根据数据库表创建实体类Book5.编写dao层操作BookDao6.编写Service服务层接口BookService7.编写服务层实现类BookServiceImpl8.编写B…

AI催生电影新纪元?大咖们纷纷发声|瞩目上影节

AI催生电影新纪元&#xff1f;大咖们纷纷发声&#xff5c;瞩目上影节 听说“谁懂AI&#xff0c;谁股票就飙高”。博纳影业集团创始人兼总经理于冬一句话引得会场爆笑连连。 AI成为今年上海国际电影节热议话题之一。在金爵电影论坛开幕论坛上&#xff0c;于冬、中国电影股份有限…