页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

问题描述:

仪表盘页面如果是超宽的,并且将“缩放方式”设置为“等比缩放宽度铺满”,则浏览页面时,页面内容显示在浏览器窗口的顶部,下部有较大空白。

...

仪表盘页面如果是超宽的,并且将“缩放方式”设置为“等比缩放宽度铺满”,则浏览页面时,页面内容显示在浏览器窗口的顶部,下部有较大空白。如何才能上下居中显示呢?

页面默认在顶部显示,如下图。

Image Modified

解决方案:

如果需要让页面内容显示在浏览器窗口的中间,上下居中,可以通过在页面上添加宏代码实现。

添加页面宏代码,如下:

Image Modified

具体宏代码如下:

代码块
languagejs
linenumberstitletrue仪表盘页面宏代码
collapselinenumberstrue
/**
 * 页面宏
 */
function main(page: IPage) { 
    page.appendCss('.page-layout > .__ScrollBar', `{
        display: flex;
        align-items: center;
    }`)
}


宏代码生效,上下居中的显示效果如下:

Image Added