Smartbi Insight V10帮助中心
页面树结构
转至元数据结尾
转至元数据起始

1. 目标效果

  • 仪表盘移动端的画布不是固定的,高度随页签绑定的内容变化.

2. 场景

切换页签组件后，仪表盘在移动端的画布随着切换绑定的内容高度而变化，目的是不想要短页面底部显示那么多空白区域。

该宏示例在 V10.5上 验证通过

本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配（如使用功能不一致，或多个宏代码冲突等），需根据实际需求开发代码。

3.操作步骤

步骤1： 新建一个空白仪表盘，并拖入页签组件,如下图，


步骤2：在页签1中拖入3个组件，如下图，页签1画布很长



步骤3：在页签2中拖入1个组件，这时，你会发现从页签1切换到页签2时，页签2页面多有很长一段空白



步骤4： 在“宏管理”加上宏代码,如下图: 

代码示例：

/**
 * 类型：ClientSide
 * 对象：页签组件
 * 事件：onAfterRender
 * 功能描述：切换页签后，调整画布长度为页签绑定组件内容的长度
 */
function main(page: IPage, portlet: IStaticTabsLinkPortlet) {
    // 处理初始化页面的长度
    resizePageHandler('', portlet)

    // 处理切换页签后的页面长度
    portlet.setActiveTabNameChangeHandler(function (activeTabName) {
        resizePageHandler(activeTabName, portlet)
        return activeTabName + ''
    })

    page.appendCss('.theme__page-background__empty-block', `{
        background: none;
    }`)
}

function resizePageHandler(activeTabName: string, portlet: IStaticTabsLinkPortlet) {
    // 需要延时让页签切换完毕后再处理页面长度
    setTimeout(() => {
         activeTabName = activeTabName || portlet.getActiveTabName()
        resizePage(activeTabName, portlet)
    }, 100)
 }

/**
 * 处理重设画布大小
 */
function resizePage(activeTabName: string, portlet: IStaticTabsLinkPortlet) {
    let links = portlet.getLinksByTabName(activeTabName)
    if (!links.length) return;
    /** 获取页签绑定项的最高 */
    let height = 0
    links.forEach((el: any, index: number) => {
        let portletSlot: any = getSlot(`.db-page div.db-portlet-ui[portletid="${el.id}"]`)
        height = Math.max(height, (portletSlot.height + portletSlot.top))
    })

    // 设置仪表盘画布大小
    let layoutSlot: any = getSlot(`.db-page .layout-container`)
    let dataId = '__macro__layout_slot'
    if (!SmartbiXMacro.data[dataId]) {
        SmartbiXMacro.data[dataId] = layoutSlot
    }
    layoutSlot.dom.style.height = Math.min(SmartbiXMacro.data[dataId].height, height) + 'px'

    // 设置最外层的滚动容器的高度
    let scale: any = getPageScale()
    let containerScrollbarSlot: any = getSlot('.db-page .pageContainerForScrollbar')
    containerScrollbarSlot.dom.style.height = parseFloat(layoutSlot.dom.style.height) * scale + 'px'

}
/**
 * 获取目标对象的位置
 */
function getSlot(selector: string) {
    let dom: any = document.querySelector(selector)
    if (!dom) return;
    return {
        dom: dom,
        top: parseInt(dom.style.top || 0),
        left: parseInt(dom.style.left || 0),
        width: parseInt(dom.clientWidth),
        height: parseInt(dom.clientHeight)
    }
}
/**
 * 获取画布缩放比
 */
function getPageScale() { 
    let layoutSlot: any = getSlot('.layout-container')
    let transform = layoutSlot.dom.style.transform
    let scale = 1
    let reg = /scale\((.+?)\)/i
    let value = transform.match(reg)
    value = value[1].replace(/^\(/, '')
    scale = parseFloat(value) || 1
    return scale
}

步骤5： 刷新页面，页签2没有多余的空白,如下图

3.下载资源

移动端支持修改页签.xml






  • 无标签