JS实现简单的gpt打字机效果

功能要求

在后台传输得到的数据在展示时候进行打字机效果一个字一个字进行展示

实现想法

1、在一个滚动容器中展示一个个文字,也就是将全部数据截取出来添加到一个新数组中

2、采用循环或者定时器进行编写

注意:前提条件是需要后端传值提供 换行符号或者其他标识符,不然只会进行一整段的显示

代码

html 复制代码
<scroll-view scroll-y="true" :scroll-top="scrollTop" style="height: 54vh;">
	<u-parse :content="answerShow"></u-parse>
</scroll-view>

这里使用的是uniapp中的富文本解析器,因为需要换行,采用的</br>,所以使用了富文本进行

采用text或者div之类的可以自己进行尝试

拿到后台返回的json数据后

javascript 复制代码
		onebyone(res) {
				var i = 0;
				let that = this
				let res1 = res.replace(/\n/g, '<br/>').replace(/[**]/g, '')
				var time = setInterval(function() {
					var text = res1.substring(0, i);
					i++
					if (i >= 1) {
						that.scrollTop++
					}
					that.answerShow = text
					if (text.length == res1.length) {
						//   console.log("定时器结束!");
						clearInterval(time);
					}
				}, 100)
			},

将后台的/n换行变成可以解析的换行,**是加粗的替换

采用定时器,每次i++来控制,每次执行进行 提取添加,当两个文本值一致后结束定时器

这里还需要控制的是滚动高度进行添加,使其滚动

,不止适用于小程序,还可以在pc项目使用

相关推荐
excel19 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel20 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼21 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping21 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript