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>

尾巴

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

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

相关推荐
初遇你时动了情6 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑0079 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字9 小时前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔10 小时前
uniapp rpx兼容平板
uni-app
荔枝吖10 小时前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗10 小时前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo141612 小时前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app
赣州云智科技的技术铺子1 天前
uni app下开发AI运动小程序解决方案
uni-app·ai运动·ai运动识别·运动识别引擎·uni ai运动解决方案·ai运动会·ai体测
Random_index1 天前
#Uniapp篇:变量&v-if 和 v-show 区别&.sync 修饰符&宽屏适配指南&Pinia内置了
uni-app
江湖行骗老中医1 天前
uni-app 修改复选框checkbox选中后背景和字体颜色
开发语言·javascript·uni-app