uniapp加载打点点效果

uniapp加载打点点效果

  • 背景
  • 实现思路
  • 代码实现
  • 尾巴

背景

为了增加系统的交互性,我们在加载数据时通常会增加一些loading动效,但是在某些场景下只需要一些简单文字提醒。比如说使用【加载中】或者【loading】等字段,但是写静态的字符又显得交互性不足,所以今天我们来简单实现下这种效果。先看效果图:
在这里插入图片描述

实现思路

实现思路很简单,就是给需要打点点的字符通过@keyframes来设置after伪元素的content,从而达到打点点效果。

代码实现

其实知道了思路代码总共也没有几行,如下:

<template><view class="loading">加载中</view>
</template><script>export default {data() {return {}},methods: {}}
</script><style lang="scss">.loading {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);  font-size: 80rpx;}.loading::after {content: "";position: absolute;top: 0%;bottom: 0;animation: dot 3s infinite steps(3, start);//这里分三步来打点点line-height: 60rpx;}@keyframes dot {33.33% {content: ".";}66.67% {content: "..";}100% {content: "...";}}
</style>

尾巴

今天实现的是一个很小很简单的功能,但是有时候在项目实际使用中却是很有效果的。
给大家分享的都是实际项目中我总结出的一些经验,希望能给大家帮助,大佬可以直接忽略。如果喜欢我的文章,欢迎给我点赞,评论,关注,谢谢大家!

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

electron线上更新

一、安装electron-updater npm install --save electron-updater二、在main.js中引入使用 import { autoUpdater } from electron; if (!isDev) {const serverUrl https://your-update-server.com; // 自定义更新服务器地址或GitHub Releases地址autoUpdater.setFeedURL(${…

SonicSense:声学振动丰富机器人的物体感知能力

在通过声学振动进行物体感知方面&#xff0c;尽管以往的研究已经取得了一些有希望的结果&#xff0c;但目前的解决方案仍然受限于几个方面。首先&#xff0c;大多数现有研究集中在只有少数&#xff08;N < 5&#xff09;基本物体的受限设置上。这些物体通常具有均质材料组成…

面试突击:HashMap 源码详解

本文已收录于&#xff1a;https://github.com/danmuking/all-in-one&#xff08;持续更新&#xff09; 数据结构 JDK1.8 之前 JDK1.8 之前 HashMap 采用 数组和链表 结合的数据结构。如下图&#xff1a; HashMap 将 key 的 hashCode 经过扰动函数处理过后得到 hash 值&#…

学习平台推荐_菜鸟教程官网

网址&#xff1a; 菜鸟教程 - 学的不仅是技术&#xff0c;更是梦想&#xff01;菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python&#xff0c;Java&#xff0c;Ruby&#xff0c;C&#xff0c;PHP , MySQL等各种编程语言的基础知识。 同…

汽车电子行业知识:什么是车载智能座舱

1.什么是车载智能座舱 车载智能座舱是指搭载在汽车内部的一种智能系统&#xff0c;它集成了各种功能和技术&#xff0c;旨在提升驾驶体验、增加安全性和提供更多的便利。这种系统可以包括诸如智能驾驶辅助、信息娱乐、智能语音控制、车内环境控制、车辆健康监测等功能。通过车…

动手学深度学习(Pytorch版)代码实践 -计算机视觉-46语义分割和数据集

46语义分割和数据集 # 图像分割和实例分割 """ 图像分割将图像划分为若干组成区域&#xff0c;这类问题的方法通常利用图像中像素之间的相关性。 它在训练时不需要有关图像像素的标签信息&#xff0c;在预测时也无法保证分割出的区域具有我们希望得到的语义。 图…

Java养老护理助浴陪诊小程序APP源码

&#x1f496;护理助浴陪诊小程序&#x1f496; 一、引言&#xff1a;养老新趋势&#x1f331; 在快节奏的现代生活中&#xff0c;养老问题逐渐成为了社会关注的焦点。如何为老年人提供便捷、贴心的服务&#xff0c;让他们晚年生活更加安心、舒适&#xff0c;是我们每个人都需…

【工具分享】SQLmap

文章目录 工具介绍安装方式环境准备安装 sqlmap 工具介绍 sqlmap 是一个非常强大的自动化 SQL 注入工具&#xff0c;主要用于渗透测试和安全审计。它能够检测和利用 SQL 注入漏洞&#xff0c;进而访问数据库服务器。 GitHub&#xff1a;https://github.com/sqlmapproject/sql…

【深度学习】tensorboard的使用

目前正在写一个训练框架&#xff0c;需要有以下几个功能&#xff1a; 1.保存模型 2.断点继续训练 3.加载模型 4.tensorboard 查询训练记录的功能 命令&#xff1a; tensorboard --logdirruns --host192.168.112.5 效果&#xff1a; import torch import torch.nn as nn impor…

ONLYOFFICE8.1新版本桌面编辑器测评

什么是 ONLYOFFICE 文档 ONLYOFFICE 文档是一套功能强大的文档编辑器&#xff0c;支持编辑处理文本文档、电子表格、演示文稿、可填写的表单、PDF&#xff0c;可多人在线协作&#xff0c;支持 AI 集成。 该套件可在 Windows、Linux、Android 和 iOS上使用&#xff0c;包括网页…

【three.js案例二】时空隧道

import * as THREE from ./build/three.module.js // 引入轨道控制器扩展库OrbitControls.js import { OrbitControls } from three/addons/controls/OrbitControls.js; // 引入dat.gui.js的一个类GUI import { GUI } from three/addons/libs/lil-gui.module.min.js;// 场景 co…

4、matlab双目相机标定实验

1、双目相机标定原理及流程 双目相机标定是将双目相机系统的内外参数计算出来&#xff0c;从而实现双目视觉中的立体测量和深度感知。标定的目的是确定各个摄像头的内部参数&#xff08;如焦距、主点、畸变等&#xff09;和外部参数&#xff08;如相机位置、朝向等&#xff09…

180Kg大载重多旋翼无人机技术详解

一、机体结构与材料 180Kg大载重多旋翼无人机在机体结构上采用了高强度轻量化设计。其主体框架采用航空铝合金材料&#xff0c;既保证了机体的结构强度&#xff0c;又减轻了整体重量。同时&#xff0c;关键部位如连接件、旋翼支撑臂等则采用碳纤维复合材料&#xff0c;以进一步…

2024年6月29日 每周新增游戏

图吧工具箱: 全名图拉丁吧硬件检测工具箱,是开源、免费、绿色、纯净的硬件检测工具合集,专为图钉及所有DIY爱好者制作,包含常用硬件测试和检测工具,月工JS必备! iGuzheng爱古筝iguzheng古筝是一款可以在线模拟古筝练习的软件&#xff0c;用户可以直接在手机上练习古筝&#xff…

Java实现RS485串口通信

博客链接地址 近期&#xff0c;我接到了一个任务&#xff0c;将报警器接入到Java项目中&#xff0c;而接入的方式就是通过RS485接入&#xff0c;本人之前可以说是对此毫无所知。不过要感谢现在的互联网&#xff0c;通过网络我查到了我想要知道的一切&#xff0c;这里记录下本次…

数据结构-分析期末选择题考点(广义表)

莫道桑榆晚 为霞尚满天 数据结构-图期末选择题 数据结构-串、数组选择题 数据结构-排序选择题 数据结构-线性表、栈、队列、二叉树合集 契子✨ 广义表&#xff1a; <1>考点一&#xff1a;基本概念 广义表的基础概念 &#xff08;1&#xff09;什么是广义表 广义表&#…

Qt开发报错:Q_INTERFACES Error: Undefined interface

1、背景 VS2019qt5.12.10 从svn拉下来的项目&#xff0c;结果报错&#xff1a; Q_INTERFACES Error: Undefined interface 之前在VS的扩展中在线安装了qt插件&#xff0c; 安装了一半&#xff0c;比较慢&#xff0c;直接强行退出了。。 后来安装了qt官网的插件。。。。 2、报…

PTA-线性表实验(JAVA)

题目1&#xff1a;Josephus环的问题及算法 【实验内容】 编程实现如下功能&#xff1a; 题意说明&#xff1a;古代某法官要判决n个犯人的死刑&#xff0c;他有一条荒唐的法律&#xff0c;将犯人站成一个圆圈&#xff0c;从第start个犯人开始数起&#xff0c;每数到第distance的…

八月份的护网行动如何参加?

护网行动背景 什么是“护网行动”&#xff1f; 指挥机构∶由公安机关统一组织的"网络安全实战攻防演习"。 护网分为两级演习∶公安部对总部&#xff0c;省厅对省级公司。 什么是“实战攻防演习” 每支队伍3-5 人组成&#xff0c;明确目标系统&#xff0c;不限制攻…

【Linux】进程信号_3

文章目录 八、进程信号2. 信号的保存3. 信号的处理 未完待续 八、进程信号 2. 信号的保存 实际执行信号的处理动作称为信号递达(Delivery) 信号从产生到递达之间的状态,称为信号未决(Pending)。 进程可以选择阻塞 (Block )某个信号。 被阻塞的信号产生时将保持在未决状态,直到…