uniapp加载打点点效果

uniapp加载打点点效果

背景

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

实现思路

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

代码实现

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

javascript 复制代码
<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>

尾巴

今天实现的是一个很小很简单的功能,但是有时候在项目实际使用中却是很有效果的。

给大家分享的都是实际项目中我总结出的一些经验,希望能给大家帮助,大佬可以直接忽略。如果喜欢我的文章,欢迎给我点赞,评论,关注,谢谢大家!

相关推荐
Q_Q51100828516 分钟前
python+uniapp基于微信小程序的旅游信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
2501_916007472 小时前
iOS 混淆工具链实战,多工具组合完成 IPA 混淆与加固(iOS混淆|IPA加固|无源码混淆|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者84 小时前
FTP 抓包分析实战,命令、被动主动模式要点、FTPS 与 SFTP 区别及真机取证流程
运维·服务器·网络·ios·小程序·uni-app·iphone
2501_915909066 小时前
iOS 26 文件管理实战,多工具组合下的 App 数据访问与系统日志调试方案
android·ios·小程序·https·uni-app·iphone·webview
盛夏绽放7 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
2501_9159184121 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手21 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_915909061 天前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
赵庆明老师1 天前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app
Javashop_jjj1 天前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app