uniapp的光标跟随和打字机效果

1、准备好容器

文字的显示textRef，以及光标的显示 ，使用transform-translate对光标进行移动到文字后面

<template><view class="container" ref="contentRef"><u-parse :content="nodeText" ref="textRef"></u-parse><view class="cursor" v-show="cursorShow" :style="{transform:`translate(${x}px,${y}px)`}"></view></view>
</template>

2、准备样式

样式，你可以自定义，不必安装我的，主要是光标的闪烁动画

<style scoped lang="scss">
.container {position: relative;width: 100%;height: 100vh;box-sizing: border-box;padding: 30rpx 20rpx;.cursor {position: absolute;left: 10rpx;top: 10rpx;width: 30rpx;height: 30rpx;background-color: #000;border-radius: 50%;animation: cursorAnimate 0.5s infinite;}@keyframes cursorAnimate {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
}
</style>

 3、逻辑

1、模拟接受数据

      async mockResponse() {this.cursorShow = true;for (let i = 0; i < this.nodeData.length; i++) {try {this.nodeText = this.nodeData.slice(0, i);this.updateCursor();await this.delay(100);} catch (e) {console.log(e)}}this.cursorShow = false;},

2、更新光标位置

      updateCursor() {// 1. 找到最后一个文本节点const lastTextNode = this.getLastTextNode(this.$refs.textRef,1);// 2. 创建一个临时文本节点const tempText = document.createTextNode('\u200B'); // 零宽字符// 3. 将临时文本节点放在最后一个文本节点之后if (lastTextNode) {lastTextNode.parentNode && lastTextNode.parentNode.appendChild(tempText);} else {this.$refs.textRef && this.$refs.textRef.$el.appendChild(tempText);}// // 4. 获取临时文本节点距离父节点的距离（x,y） 可以使用 setStart 和 setEnd 方法来设置 Range 的开始和结束位置。const range = document.createRange(); // 设置范围range.setStart(tempText, 0);range.setEnd(tempText, 0);const rect = range.getBoundingClientRect(); // 获取距离信息// // 5. 获取当前文本容器距离视图的距离(x,y)const textRect = this.$refs.contentRef && this.$refs.contentRef.$el.getBoundingClientRect();// 6. 获取到当前文本节点的位置，并将光标的位置插入到相应位置if (textRect) {const x = rect.left - textRect.left + 10;const y = rect.top - textRect.top; // 7.5 是光标高度的一半，为了居中显示光标this.x = x;this.y = y;}// 7. 移除临时文本节点tempText.remove();},

4、完整代码 如下：

<template><view class="container" ref="contentRef"><u-parse :content="nodeText" ref="textRef"></u-parse><view class="cursor" v-show="cursorShow" :style="{transform:`translate(${x}px,${y}px)`}"></view></view>
</template><script>export default {data() {return {nodeData: '打击好，<p>1. 近日，一份全球数学竞赛决赛名单引起广泛关注。其中，学服装设计的姜萍，以93分的高分名列第12位。天才少女姜萍的故事在全网引发热议。总台记者对江苏涟水中专党委书记进行了专访，揭秘姜萍选择涟水中专的原因。</p>\n' +'    <p>2. 江苏涟水中专党委书记介绍，姜萍中考621分，能够达到当地普通高中的录取分数线，之所以选择涟水中专，据姜萍自己讲，原因之一是当时她的姐姐以及两个要好的同学都在这所学校就读。另外，就是姜萍对服装专业比较感兴趣，认为这里对自己的兴趣、爱好发展发挥更有利。</p>',cursorShow: true,nodeText: '',x: 0,y: 0,}},onLoad() {let timer = setInterval(() => {if (this.$refs.textRef) {clearInterval(timer)this.mockResponse()}}, 500)},methods: {delay(time) {return new Promise((resolve) => setTimeout(resolve, time));},/** 模拟请求 */async mockResponse() {this.cursorShow = true;for (let i = 0; i < this.nodeData.length; i++) {try {this.nodeText = this.nodeData.slice(0, i);this.updateCursor();await this.delay(100);} catch (e) {console.log(e)}}this.cursorShow = false;},updateCursor() {// 1. 找到最后一个文本节点const lastTextNode = this.getLastTextNode(this.$refs.textRef,1);// 2. 创建一个临时文本节点const tempText = document.createTextNode('\u200B'); // 零宽字符// 3. 将临时文本节点放在最后一个文本节点之后if (lastTextNode) {lastTextNode.parentNode && lastTextNode.parentNode.appendChild(tempText);} else {this.$refs.textRef && this.$refs.textRef.$el.appendChild(tempText);}// // 4. 获取临时文本节点距离父节点的距离（x,y） 可以使用 setStart 和 setEnd 方法来设置 Range 的开始和结束位置。const range = document.createRange(); // 设置范围range.setStart(tempText, 0);range.setEnd(tempText, 0);const rect = range.getBoundingClientRect(); // 获取距离信息// // 5. 获取当前文本容器距离视图的距离(x,y)const textRect = this.$refs.contentRef && this.$refs.contentRef.$el.getBoundingClientRect();// 6. 获取到当前文本节点的位置，并将光标的位置插入到相应位置if (textRect) {const x = rect.left - textRect.left + 10;const y = rect.top - textRect.top; // 7.5 是光标高度的一半，为了居中显示光标this.x = x;this.y = y;}// 7. 移除临时文本节点tempText.remove();},/** 获取最后一个文本节点 */getLastTextNode(node,index = 1) {if (index === 1) { // 获取的第一个node，需要查询$el，childNodes里面的就，不需要了node = node.$el;}if (!node) return null;// console.log(node, node.textContent, node.nodeType, Node.TEXT_NODE)if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {// console.log('返回的', node)return node;}for (let i = node.childNodes.length - 1; i >= 0; i--) {const childNode = node.childNodes[i];const textNode = this.getLastTextNode(childNode,index + 1);if (textNode) {return textNode;}}return null;}}
}
</script><style scoped lang="scss">
.container {position: relative;width: 100%;height: 100vh;box-sizing: border-box;padding: 30rpx 20rpx;.cursor {position: absolute;left: 10rpx;top: 10rpx;width: 30rpx;height: 30rpx;background-color: #000;border-radius: 50%;animation: cursorAnimate 0.5s infinite;}@keyframes cursorAnimate {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
}
</style>