.console-wraper{
display: flex;
flex-direction: column;
height: 100%;
}
.console_window {
flex: 1;
background: #333;
overflow: auto;
.console_output {
white-space: pre-wrap;
word-wrap: break-word;
padding: 12px;
font-weight: bold;
}
/deep/ pre.input_line {
font-size: 14px;
color: yellow;
opacity: 0.8;
padding: 0 20px;
}
/deep/ pre.output_line {
color: #fff;
font-size: 13px;
white-space: pre-wrap;
word-wrap: break-word;
padding-left: 40px;
opacity: 0.7;
}
}
当程序在后端运行时,通常在前端显示一个动态进度条,或者加载动画或数字的百分比
当然,更好的效果是向当前用户显示程序的特定细节,例如操作过程中记录的日志或真实的时间过程链接
例如:
当然,我盲目地写了它,只是为了展示我们要实现的日志。当有许多这样的日志内容或过程内容时,最好的方法是让页面随着内容的增加而自动滚动。
在此过程中,一方面,必须连续调用接口才能获取最新数据。
请注意,此处的页面上有三个条件可以制作滚动动画。
但是,这样做的不利。当用户的网络不那么流畅或服务器拥挤时,所谓的接口就处于吊坠状态。仍调用以下接口。
所以我更喜欢使用
关于页面自动滚动的讨论
一般而言,有两种方法如何自动滚动内容。
scrollintoview方法将滚动元素的父容器,因此可以在父元素中看到调用scrollintoview的元素。
参数描述:是对位的元素元素的顶部,也是其滚动区域可见区域的顶部。块:定义垂直方向的对齐,可选,或;内联:定义水平方向,可选或用法方法的对齐方式:总结scrolllintoviev的方法。浏览器没有问题
此外,此方法对布局没有要求。这是简单,方便且易于理解的。您只需要调用最后一个渲染日志。
此方法是旧的。此方法可以将内容滚动到指定的坐标。
语法如下:scrollto(xpos,ypos)
参数描述:XpoSnumber-Nequience. X坐标YpoSnumber-Guss在窗口文档显示区域的左上角需要使用。如何使用窗口文档显示区域左上角显示的文档的Y坐标:
<-- 这里写日志信息,注意,一定要在父元素外再套一层-->
.console-wraper{
display: flex;
flex-direction: column;
height: 100%;
}
.console_window {
flex: 1;
background: #333;
overflow: auto;
.console_output {
white-space: pre-wrap;
word-wrap: break-word;
padding: 12px;
font-weight: bold;
}
/deep/ pre.input_line {
font-size: 14px;
color: yellow;
opacity: 0.8;
padding: 0 20px;
}
/deep/ pre.output_line {
color: #fff;
font-size: 13px;
white-space: pre-wrap;
word-wrap: break-word;
padding-left: 40px;
opacity: 0.7;
}
}
本文的内容已经结束。案例代码尚未完全测试。如果您有任何疑问,您可以在评论区域留言:)
作者:阳光同学
