uniapp实现光标闪烁（配合自己的键盘）

An_s

于 2024-07-08 09:13:09 发布

阅读量260

点赞数 4

分类专栏：技术（javascript）文章标签： uni-app

本文链接：https://blog.csdn.net/echo_ae/article/details/140258660

版权

技术（javascript）专栏收录该内容

112 篇文章 0 订阅

订阅专栏

前言

因为公司业务需要，所以我们...

演示

其实就是Chat自动打字效果

代码

键盘请看这篇文件

<template>
<view class="list">
	<view class="title"><text>手机号码</text></view>
	<view class="typewriter-content">
	  <text class="value">{{mobile}}</text>
	  <text class="cursor">|</text>
	</view>
</view>
</template>
<script>
	export default {
        data() {
			return {
				mobile: '',
			}
		},
    }
</script>
<style lang="scss" scoped>
    .list {
		
		margin-bottom: 16rpx;
		.typewriter-content {
				height: 40rpx;
				border-radius: 10rpx;
				border: 2rpx solid #222;
				display: flex;	
				align-items: center;
				.value {
					font-size: 16rpx;
					margin-left: 4rpx;
					color: #222;
				}
				.cursor {
					// 控制光标大小
					font-size: 20rpx;
					font-weight: bold;
					margin-left: 4rpx;
					animation: flash 1s linear infinite;
					color: #000;
				}
				@keyframes flash {
					0% {
					    opacity: 1;
					}
						
					80% {
						opacity: 0;
					}
						
					100% {
					     opacity: 1;
					}
				}
				}
				.title {
					// font-size: 24rpx;
					margin-top: -4rpx;
					margin-bottom: 8rpx;
				}
}
</style>