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项目使用

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js