如何用Axure實現類Excel凍結窗口功能(同時固定標題行和首列)

8 評論 8062 瀏覽 14 收藏 5 分鐘

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

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

需求:在 Excel 表格中,凍結標題行和標題列后,內容區域橫向滾動時,標題行同步滾動、標題列固定;內容區域縱向滾動時,標題列同步滾動、標題行固定。類似下圖描述:

一、分析

單向實現固定(行固定或列固定)時,如實現標題列固定在左側,內容區可以上下左右滾動,且上下滾動時標題列同步滾動。我們可以將數據采用動態面板(僅動態面板能采用 Scrolled 事件,內聯框架沒有該事件)容納(動態面板大小與數據內容相適應)。進而用一個適合大小(目標顯示大?。┑膭討B面板包含標題列及內容動態面板,設置為 Scroll as need 。

在上面基礎上實現標題行固定。要采用某種方案做到,數據內容若橫向滾動時標題行亦同步滾動相同具體。

觸發條件:當數據內容動態面板發生滾動 -> 采用 Scrollrd 事件。

動作:使標題行同步滾動。

  • Scroll to Widget ( Anchor Link) 動作,但經過實踐發覺無法達到預期效果
  • Move 動作,如何使用該動作達成預期效果?采用動態面板,使內部的標題行移動

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

經過第2步的分析,改方案具有通用性、普適性,我們可以拿來替代第1步中的實現手段,以此來實現整個效果。

二、實踐

第一步:搭建頁面框架

使用不同動態面板來構建行標題區域、列標題區域、詳細內容區域、統計內容區域,并都設置為 Scroll as need 。

第二步:設置交互

1)設置詳細內容區交互邏輯。實現詳細數據區滾動時,行標題、列標題、匯總數據區相應內容同步滾動。

注:是讓各區內的內容同步滾動,可以通過組合或用動態面板包含的方式來為內容分組。如下:

具體交互:

相關函數:[[This.scrollX]]、[[This.scrollY]]

2)為其他幾個區域設置交互。

行標題區

列標題區

統計數據區

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

本文由 @Ming丶 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 大佬,能否再分享一下源文件,評論的百度網盤鏈接過期了,非常感謝??!

    來自福建 回復
    1. 來晚了,我換個永久鏈接。
      鏈接: https://pan.baidu.com/s/1IiUcZsriETsPE21A73rGHg?pwd=2022
      提取碼: 2022

      來自浙江 回復
  2. 看了一上午,沒試出來,我的中文面板

    來自廣東 回復
    1. 已更新永久鏈接

      來自浙江 回復
  3. 大神,有源文件可以參考沒?謝謝哈。

    來自美國 回復
    1. 出去旅游了一周,回復慢了。我共享下。鏈接: https://pan.baidu.com/s/1-5EKJEqnwN2S6ecIFqXVvA 提取碼: 2022 復制這段內容后打開百度網盤手機App,操作更方便哦

      來自浙江 回復
    2. 謝謝

      來自重慶 回復
    3. 文件不存在哦

      來自廣東 回復