在工作中，有時需要采用Axure 交互來模擬 Excel 凍結(jié)窗口功能，如何做到同時固定標(biāo)題行和首列呢？本文作者分享了他的一個思路，一起來看一下吧。

在具體工作中，遇到要采用 Axure 交互來模擬 Excel 凍結(jié)窗口功能。平時常用到凍結(jié)表單首列、尾列的情況，但不會做同時固定標(biāo)題行、首列甚至于底部表格的情況。浪費了午休時間在網(wǎng)上找尋合適的方案，遍尋無果后只能自己探尋合適方案了。現(xiàn)將個人的方案共享給各位，如有雷同那就是咱們思路同頻了。

需求：在 Excel 表格中，凍結(jié)標(biāo)題行和標(biāo)題列后，內(nèi)容區(qū)域橫向滾動時，標(biāo)題行同步滾動、標(biāo)題列固定；內(nèi)容區(qū)域縱向滾動時，標(biāo)題列同步滾動、標(biāo)題行固定。類似下圖描述：

一、分析

單向?qū)崿F(xiàn)固定（行固定或列固定）時，如實現(xiàn)標(biāo)題列固定在左側(cè)，內(nèi)容區(qū)可以上下左右滾動，且上下滾動時標(biāo)題列同步滾動。我們可以將數(shù)據(jù)采用動態(tài)面板（僅動態(tài)面板能采用 Scrolled 事件，內(nèi)聯(lián)框架沒有該事件）容納（動態(tài)面板大小與數(shù)據(jù)內(nèi)容相適應(yīng)）。進而用一個適合大?。繕?biāo)顯示大?。┑膭討B(tài)面板包含標(biāo)題列及內(nèi)容動態(tài)面板，設(shè)置為 Scroll as need 。

在上面基礎(chǔ)上實現(xiàn)標(biāo)題行固定。要采用某種方案做到，數(shù)據(jù)內(nèi)容若橫向滾動時標(biāo)題行亦同步滾動相同具體。

觸發(fā)條件：當(dāng)數(shù)據(jù)內(nèi)容動態(tài)面板發(fā)生滾動 -> 采用 Scrollrd 事件。

動作：使標(biāo)題行同步滾動。

• Scroll to Widget ( Anchor Link) 動作，但經(jīng)過實踐發(fā)覺無法達到預(yù)期效果
• Move 動作，如何使用該動作達成預(yù)期效果？采用動態(tài)面板，使內(nèi)部的標(biāo)題行移動

需要獲取內(nèi)容面板的滾動距離 -> 采用 scrollX、scrollY 分別獲取橫向、縱向滾動距離。

經(jīng)過第2步的分析，改方案具有通用性、普適性，我們可以拿來替代第1步中的實現(xiàn)手段，以此來實現(xiàn)整個效果。

二、實踐

第一步：搭建頁面框架

使用不同動態(tài)面板來構(gòu)建行標(biāo)題區(qū)域、列標(biāo)題區(qū)域、詳細(xì)內(nèi)容區(qū)域、統(tǒng)計內(nèi)容區(qū)域，并都設(shè)置為 Scroll as need 。

第二步：設(shè)置交互

1）設(shè)置詳細(xì)內(nèi)容區(qū)交互邏輯。實現(xiàn)詳細(xì)數(shù)據(jù)區(qū)滾動時，行標(biāo)題、列標(biāo)題、匯總數(shù)據(jù)區(qū)相應(yīng)內(nèi)容同步滾動。

注：是讓各區(qū)內(nèi)的內(nèi)容同步滾動，可以通過組合或用動態(tài)面板包含的方式來為內(nèi)容分組。如下：

具體交互：

相關(guān)函數(shù)：[[This.scrollX]]、[[This.scrollY]]

2）為其他幾個區(qū)域設(shè)置交互。

行標(biāo)題區(qū)

列標(biāo)題區(qū)

統(tǒng)計數(shù)據(jù)區(qū)

演示地址：https://r1el3n.axshare.com，密碼：2022。