前端大屏幕项目的一点思考
前端精髓
共 2306字,需浏览 5分钟
·
2021-05-12 21:47
想必近几年前端的数据可视化越来越重要了,很多甲方爸爸都喜欢那种炫酷的大屏幕设计,类似如下这种:
遇到的这样的项目,二话不说,echarts 或者 antv,再搭配各种 mvvm 框架(react,vue),找二次封装过的组件,然后开始埋头开始写了,写着写着你会发现,如何适配不同屏幕呢?css 媒体查询吧,用 vw 吧,哪个好点呢。其实写到最后,我觉得都不好。
对于这种拿不定主意的情况呢,最好还是参考大厂的做法,于是去找了百度suger等,他们是如何写这样的页面的。
案例链接:https://sugar.aipage.com/dashboard/5f81db321ff3e080e9f09168c923854f
仔细观察他们都采用 css3 的缩放 transform: scale(X) 属性,看到这是不是有种豁然开朗的感觉。
于是我们只要监听浏览器的窗口大小,然后控制变化的比例就好了。
以React的写法为例:
getScale=() => {
// 固定好16:9的宽高比,计算出最合适的缩放比,宽高比可根据需要自行更改
const {width=1920, height=1080} = this.props
let ww=window.innerWidth/width
let wh=window.innerHeight/height
return ww<wh?ww: wh
}
setScale = debounce(() => {
// 获取到缩放比,设置它
let scale=this.getScale()
this.setState({ scale })
}, 500)
监听window的resize事件最好加个节流函数debounce。
window.addEventListener('resize', this.setScale)
然后一个简单的组件就封装好了。
import React, { Component } from 'react';
import debounce from 'lodash.debounce'
import s from './index.less'
class Comp extends Component{
constructor(p) {
super(p)
this.state={
scale: this.getScale()
}
}
componentDidMount() {
window.addEventListener('resize', this.setScale)
}
getScale=() => {
const {width=1920, height=1080} = this.props
let ww=window.innerWidth/width
let wh=window.innerHeight/height
return ww<wh?ww: wh
}
setScale = debounce(() => {
let scale=this.getScale()
this.setState({ scale })
}, 500)
render() {
const {width=1920, height=1080, children} = this.props
const {scale} = this.state
return(
<div
className={s['scale-box']}
style={{
transform: `scale(${scale}) translate(-50%, -50%)`,
WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,
width,
height
}}
>
{children}
</div>
)
}
componentWillUnmount() {
window.removeEventListener('resize', this.setScale)
}
}
export default Comp
.scale-box{
transform-origin: 0 0;
position: absolute;
left: 50%;
top: 50%;
transition: 0.3s;
}
只要把页面放在这个组件中,就能实现跟大厂们类似的效果。这种方式下不管屏幕有多大,分辨率有多高,只要屏幕的比例跟你定的比例一致,都能呈现出完美效果。而且开发过程中,样式的单位也可以直接用px,省去了转换的烦恼~
注:图表插件bizcharts在css缩放下会有鼠标移入时像素偏移的bug,由于是基于antv的,这主要是antv的bug,我写这篇文章的时候官方还未修复这个bug,echarts没有这个bug。
评论