移動端APP最常見的界面就是列表界面，如58租房小程序的列表頁，本教程主要分享如何優化列表頁的排版以及過程中遇到的難點解決方法。
效果如下：
界面優化一：隱藏滾動條
實現列表的垂直滾動，需要將內容先轉化為動態面板，滾動條設置為：自動顯示垂直滾動條。
由於軟件自身自帶的滾動條樣式比較醜，因此我們需要將其隱藏。
首先，將此動態面板的寬度變寬，由【375】變為【395】，正好將滾動條的位置移出界面，如下所示：
其次，再將此【動態面板】轉化為新的【動態面板】，並將寬度變小為原來的尺寸【375】；切記，將滾動條設置為：無。
這樣，即可以實現滾動，還能隱藏滾動條，效果如下：
界面優化二：列表頁數據項的鼠標懸浮選擇效果
實現列表數據的展示，推薦使用【中繼器】，可以實現每一項數據鼠標對應選中的懸浮效果，實現步驟如下：
首先，在【中繼器】數據項中，增加一個不填充 的矩形，命名為“懸浮矩形”，圖層順序為最頂層。
其次，給此矩形增加鼠標懸浮的交互樣式。設置填充色為#999999，透明度為10，設置如下：
預覽效果如下，發現一個明顯的問題：無論鼠標移動某一個數據項，所有數據項的背景矩形都被選中。
通過不斷的篩查排除，最後找到動態面板的一個屬性設置：允許觸發鼠標交互。
將其勾選去除後，即能正常顯示數據項的鼠標懸浮效果，最終效果如下：
題圖來自Unsplash，基於CC0協議
分享到:
閱讀更多 人人都是產品經理 的文章
