自学内容网 自学内容网

大屏开发你需要知道哪些

大屏

大屏是什么呢?再我前几年刚接触这个词得时候很新颖,全名叫态势感知大屏,大屏得特点是炫酷、好看,给用户满满得科技感。 听一位前辈说当年再招标会上,再都用exel、word做界面图表文档得时候,有一家公司把可视化态势感知大屏展示出来了,直接秒杀其他厂家。 那么当我们开发一款大屏点的时候需要注意什么呢?

适配

再适配得技术概念上分为真适配伪适配。 那么什么叫做真适配伪适配呢?

伪适配

伪适配就是利用csstransform: scale(1); 达到一个界面适配。

优点:

  • 适配比较快,就使用正常px开发就好了,监听下分辨率做一个scale缩放。

缺点:

  • png、canvas 等要转成svg,不然就会模糊、不清晰。

真适配

真适配就是利用vw、vh、rem、%,达到一个界面得真适配。

  • vw 100vw 等于当前窗口屏幕得宽度;
  • vh 100vh 等于当前窗口屏幕得高度;
  • rem 主要根据根元素body得font-size:12px, 1rem 等于12px, 然后跟用窗口得大小赋值给body对应得fontSize;

优点:

  • 再开发阶段需要直接使用对应得尺寸单位,或者利用postcss-px-to-viewport、postcss-pxtorempostcss插件达到一个px得转换。(个人建议再开发阶段直接使用适配单位,插件还是有或多或少得问题)。

缺点:

  • 要针对性进行每个元素进行单位适配,稍微有些成本(可以利用vscode插件直接完成转化);
    • vscode插件:【px2vw】 针对css、less、sass 可以完成单位转化,但是他不支持.vue文件中style的转换。
    • vscode插件:【px2xx】这个插件能满足咱们开发单位转换。

真适配又分为 高度适配、宽度适配。

  • 宽度适配就是根据用户得屏幕窗口宽度发生变化做到一个界面适配,比如全部都使用vw
  • 高度适配是根据用户屏幕窗口发生变化达到一个界面适配,比如使用vh;

其实个人认为没必要做高度适配、都根据宽度vw达到一个界面适配就好了,主要是因为做高度适配得话使用vh,再小点得屏幕上 很容易就发生文本重叠、界面不美观、因为文字大小再浏览器最小是12px嘛。

大屏界面布局

其实一般大屏布局会又一个header(主标题、时间展示)side (副标题:屏幕的两侧可能会分为4块4个维度去展示当前屏的一些信息)、main(大屏主视图)、footer(底部)

  • 咱们再搭建容器使用的都是定位那么一定要分清定位权重。 下面是一个常见布局权重分布:

  • header 应该是position: absolute;top: 0; height: 60px(需要完成对应设计搞单位转换): z-index:2; 权重是2;

  • side 应该是position: absolute; top: 60px(header的高度);

    • leftSide 应该是position: absolute; top: 0; left: 0; z-index: 2; 权重2
      • leftTopSide 应该是 position: absolute; top: 10px(间距); z-index: 3; 权重3
      • leftBottomSide 应该是 position: absolute; bottom: 10px(间距); z-index: 3;权重3
    • rightSide 应该是position: absolute; top: 0; righht: 0; z-index: 2;权重2
      • rightTopSide 应该是 position: absolute; top: 10px(间距); z-index: 3; 权重3
      • rightBottomSide 应该是 position: absolute; bottom: 10px(间距); z-index: 3; 权重3
  • main 应该是position: absolute; top: 60px(header的高度);z-index: 1; 权重1

  • footer 应该是position: absolute; bottom: 0px; z-index: 2; 权重2

组件划分

其实再大屏中一般设计会遵循主标题(header)、副标题(side、footer)然后主视图这么去设计;

  • 那么其实副标题应该都是长一个样,咱们可以封成一个card组件供大屏使用(vue设计可以参考el-card)。
  • 空组件 每个模块应该都要考虑数据为空的情况;
  • loading 组件,每个模块都应该有loading加载的动作;

时间

提供一份时间的代码

import moment from 'moment';
// import days from 'days';

const WEEKLY_MAP = {
  1: '星期一',
  2: '星期二',
  3: '星期三',
  4: '星期四',
  5: '星期五',
  6: '星期六',
  7: '星期天',
};

export const getWeekly = () => WEEKLY_MAP[new Date().getDay()];

export const getDate = () => moment().format('YYYY-MM-DD');

// 这个应该是定时器循环去调用的
export const getTime = () => moment().format('HH:mm:ss');

全屏

全屏功能再大屏中也是必要的功能,下面提供一份全屏相关的函数。

// fullscreen.js
// element 是尼的全屏的容器, 进入全屏
export function fullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// 退出全屏
export function exitFullscreen() {
  if (document.exitFullScreen) {
    document.exitFullScreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (element.msExitFullscreen) {
    element.msExitFullscreen();
  }
}

// 判断是否再全屏
export function isFullScreen() {
  return !!(
    document.fullscreen
      || document.mozFullScreen
      || document.webkitIsFullScreen
      || document.webkitFullScreen
      || document.msFullScreen
  );
}

 

select 组件

Select 组件再大屏中用的时候需要注意 一定要:popper-append-to-body="false"false。让插入到当前容器里面 不要让再body里,不然再全屏下就看不到下拉菜单了。

文本

其实再根据设计搞咱们用rem、vw、vh也很容易会让文字超出当前容器,那么咱们再开发阶段就应该考虑到文本超出的情况,做好文本省略,出现title。 不然测试会给尼提bug的;

动画

  • 针对数字滚动可以使用vue数字滚动组件react数字滚动组件

  • 我比较常用的css animate动画库; 里面比较丰富渐入、渐出等等;

效果 


原文地址:https://blog.csdn.net/weixin_57031986/article/details/136391986

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!