如何設計一款精美的橫軸智能滾動條？本文對設計過程進行了詳細地介紹。

頁面布局

頁面設定

新建一個頁面文件，命名為【精美橫軸智能滾動條設計】。

在【精美橫軸智能滾動條設計】頁面內新建一個命名為【table】的動態面板。

【底層背景】：

從元件庫內將【矩形】元件拖入界面內，命名為【底層背景】。其長寬為=1030*640，背景顏色為#ffffff,有邊框，邊框粗為1px，邊框顏色為#f2f2f2。

【table】：

將【table】內的【State1】改為【第一層】。

在【第一層】內新建一個動態面板，命名為【第二層】，并將【第二層】內的【State1】更改為【第三層】。

在【第三層】內新建一個組合文件，命名為【表格】，在【表格】內新建一個叫做【表頭】的組合文件，并將多個【矩形】元件從元件庫內拖入【表頭】內，并進行設計。

從元件庫內拖入一個【中繼器】，命名為【表格內容】，并將多個【矩形】元件填充到中繼器最底層。

動態交互

效果設計

列表效果的實現：

選中【表格內容】內的【矩形】元件，進行【交互樣式設置】，將鼠標懸停、鼠標按下、選中的交互樣式的【字體顏色】和【填充顏色】進行設置。

智能滾動條的實現：

選中【第三層】元件，將其【滾動條】的狀態選擇成【自動顯示水平滾動條】，并將【第二層】的高度設置為大于【第一層】高度10px。

交互流程

實現中繼器與矩形元件的數據綁定：

選中【表格】組合元件中【中繼器】，在【屬性】中設定【每項加載時】的交互用例，并配置相關的動作。

步驟一：設置【每項加載時】用例的配置動作

在case1【組織動作】中添加【設置文本】動作，在【配置動作】內勾選分別勾選要綁定的【矩形】元件，設置文本為【值】，切【值】(fx)=【[[Item.Column0]]】。

步驟二：【中繼器】的數據填充

選中【中繼器】，在【屬性】的【中繼器】表格區域進行數據方面的增刪改查。

步驟三：設置【表格】顯示的行數

選中【中繼器】，在【樣式】中更改【表格】需要展示的行數。

預覽效果

結語

請路過的朋友們多多支持哈，筆者在這里先謝謝了，以后會有更多優質的文章和產品在這個平臺上進行發布，請盡請期待呦！

本文由 @臥枕江山 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

總結

以上是生活随笔為你收集整理的table超出边框出现滚动条_精美横轴智能滚动条设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。