前端大屏幕項目的一點思考
想必近幾年前端的數(shù)據(jù)可視化越來越重要了，很多甲方爸爸都喜歡那種炫酷的大屏幕設(shè)計，類似如下這種：
遇到的這樣的項目，二話不說，echarts 或者 antv，再搭配各種 mvvm 框架（react，vue），找二次封裝過的組件，然后開始埋頭開始寫了，寫著寫著你會發(fā)現(xiàn)，如何適配不同屏幕呢？css 媒體查詢吧，用 vw 吧，哪個好點呢。其實寫到最后，我覺得都不好。
對于這種拿不定主意的情況呢，最好還是參考大廠的做法，于是去找了百度suger等，他們是如何寫這樣的頁面的。
案例鏈接：https://sugar.aipage.com/dashboard/5f81db321ff3e080e9f09168c923854f
仔細(xì)觀察他們都采用 css3 的縮放 transform: scale(X) 屬性，看到這是不是有種豁然開朗的感覺。
于是我們只要監(jiān)聽瀏覽器的窗口大小，然后控制變化的比例就好了。
以React的寫法為例：
getScale=() => {// 固定好16:9的寬高比，計算出最合適的縮放比，寬高比可根據(jù)需要自行更改const {width=1920, height=1080} = this.propslet ww=window.innerWidth/widthlet wh=window.innerHeight/heightreturn ww<wh?ww: wh}setScale = debounce(() => {// 獲取到縮放比，設(shè)置它let scale=this.getScale()this.setState({ scale })}, 500)
監(jiān)聽window的resize事件最好加個節(jié)流函數(shù)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.propslet ww=window.innerWidth/widthlet wh=window.innerHeight/heightreturn ww<wh?ww: wh}setScale = debounce(() => {let scale=this.getScale()this.setState({ scale })}, 500)render() {const {width=1920, height=1080, children} = this.propsconst {scale} = this.statereturn(<divclassName={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;}
只要把頁面放在這個組件中，就能實現(xiàn)跟大廠們類似的效果。這種方式下不管屏幕有多大，分辨率有多高，只要屏幕的比例跟你定的比例一致，都能呈現(xiàn)出完美效果。而且開發(fā)過程中，樣式的單位也可以直接用px，省去了轉(zhuǎn)換的煩惱~
注：圖表插件bizcharts在css縮放下會有鼠標(biāo)移入時像素偏移的bug，由于是基于antv的，這主要是antv的bug，我寫這篇文章的時候官方還未修復(fù)這個bug，echarts沒有這個bug。
評論
圖片
表情