前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >EasyDSS前端界面在页面缩小时内置列表仍需手动刷新的优化

EasyDSS前端界面在页面缩小时内置列表仍需手动刷新的优化

原创
作者头像
TSINGSEE青犀视频
修改2021-09-07 18:10:50
4070
修改2021-09-07 18:10:50
举报
文章被收录于专栏:TSINGSEE青犀视频

RTMP协议的视频平台EasyDSS除了直播外,还支持点播,转码、上传一体化设计,使音视频资源转码后可立即面向互联网进行发布,在线上教育领域已经能够成熟落地。在开发以及功能的更新过程中,EasyDSS内还运用了很多其他层面的开发技巧,我们也会不定期在博客更新,欢迎大家了解测试。

在做EasyDSS前端更新的时候,测试前端界面适配度,发现在直播管理页面缩小时,其列表不会自动伸缩,需要手动刷新之后才会按照比例进行匹配。

如下是页面正常大小下的列表:

页面缩小后,列表仍是维持原大小:

我们结合了表格设置的机制来进行检查,设置表格高度的方法只在DOM元素挂载后执行,页面放大缩小未调用设置表格的方法。在该问题中,我们需要对这种设置表格的方法添加监听,页面高度改变则调用监听页面尺寸:

代码语言:javascript
复制
created() {
  window.addEventListener("resize", this.getHeight);
},

设置表格方法

代码语言:javascript
复制
getHeight(){
  if (document.documentElement.clientHeight < 678){
    this.tableHeight = 300
  }else {
    this.tableHeight = document.documentElement.clientHeight - 400
  }
},

解决之后列表就能够正常随着比例自动进行放大和缩小了。

页面加载后:

页面放大后:

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云直播
云直播(Cloud Streaming Services,CSS)为您提供极速、稳定、专业的云端直播处理服务,根据业务的不同直播场景需求,云直播提供了标准直播、快直播、云导播台三种服务,分别针对大规模实时观看、超低延时直播、便捷云端导播的场景,配合腾讯云视立方·直播 SDK,为您提供一站式的音视频直播解决方案。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档