如何用Axure實現類Excel凍結窗口功能(同時固定標題行和首列)
在工作中,有時需要采用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 協議。
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
大佬,能否再分享一下源文件,評論的百度網盤鏈接過期了,非常感謝??!
來晚了,我換個永久鏈接。
鏈接: https://pan.baidu.com/s/1IiUcZsriETsPE21A73rGHg?pwd=2022
提取碼: 2022
看了一上午,沒試出來,我的中文面板
已更新永久鏈接
大神,有源文件可以參考沒?謝謝哈。
出去旅游了一周,回復慢了。我共享下。鏈接: https://pan.baidu.com/s/1-5EKJEqnwN2S6ecIFqXVvA 提取碼: 2022 復制這段內容后打開百度網盤手機App,操作更方便哦
謝謝
文件不存在哦