移動端APP最常見的界面就是列表界面，如58租房小程序的列表頁，本教程主要分享如何優(yōu)化列表頁的排版以及過程中遇到的難點解決方法。

效果如下：

界面優(yōu)化一：隱藏滾動條

實現(xiàn)列表的垂直滾動，需要將內(nèi)容先轉(zhuǎn)化為動態(tài)面板，滾動條設(shè)置為：自動顯示垂直滾動條。

由于軟件自身自帶的滾動條樣式比較丑，因此我們需要將其隱藏。

首先，將此動態(tài)面板的寬度變寬，由【375】變?yōu)椤?95】，正好將滾動條的位置移出界面，如下所示：

其次，再將此【動態(tài)面板】轉(zhuǎn)化為新的【動態(tài)面板】，并將寬度變小為原來的尺寸【375】；切記，將滾動條設(shè)置為：無。

這樣，即可以實現(xiàn)滾動，還能隱藏滾動條，效果如下：

界面優(yōu)化二：列表頁數(shù)據(jù)項的鼠標(biāo)懸浮選擇效果

實現(xiàn)列表數(shù)據(jù)的展示，推薦使用【中繼器】，可以實現(xiàn)每一項數(shù)據(jù)鼠標(biāo)對應(yīng)選中的懸浮效果，實現(xiàn)步驟如下：

首先，在【中繼器】數(shù)據(jù)項中，增加一個不填充 的矩形，命名為“懸浮矩形”，圖層順序為最頂層。

其次，給此矩形增加鼠標(biāo)懸浮的交互樣式。設(shè)置填充色為#999999，透明度為10，設(shè)置如下：

預(yù)覽效果如下，發(fā)現(xiàn)一個明顯的問題：無論鼠標(biāo)移動某一個數(shù)據(jù)項，所有數(shù)據(jù)項的背景矩形都被選中。

通過不斷的篩查排除，最后找到動態(tài)面板的一個屬性設(shè)置：允許觸發(fā)鼠標(biāo)交互。

將其勾選去除后，即能正常顯示數(shù)據(jù)項的鼠標(biāo)懸浮效果，最終效果如下：

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議