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

前言

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

演示

其实就是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>

原文地址：https://blog.csdn.net/echo_Ae/article/details/140258660

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！