Axure製作手機UI原型之介面滑動滾動效果

用axure製作手機介面原型的時候，往往會遇到像android中listview那種頁面，手指在介面上滑動，頁面也就跟隨滾動，拖拽到底部或者頂部的時候還有個回彈效果，如何在axure之中模擬這種滾動呢，是用其內部框架linline frame? 用這個有以下幾點不妥：

1. 該框架的邊框在手機上實在太醜。

2. 只能連線到其他介面，這是不舒服的一點，試想這個內部介面在導航中開啟，別人都不知道你這介面是怎麼回事。

下面我們用動態面板來實現這種效果，總體辦法是在動態面板中再巢狀乙個動態面板。

實現步驟如下：

1. 首先建立乙個動態面板，這裡命名為外層面板。如圖：

2. 外層面板只需要乙個狀態就行了。然後在該狀態中再新增乙個動態面板。將這個面板命名為內層面板。

這個動態面板為頁面的實際大小，這裡為了做滾動效果其長度應該比外層面板更長，這裡就兩倍長吧，滾動兩屏（根據實際自行決定長度），外層面板就相當於乙個遮罩的作用，擋住紅杏出牆的那部分。

3. 現在的結構如圖所示

接下來就是關鍵的步驟了。

4. 給內層面板新增拖動事件，如圖

5. 在頁面上端和下端新增兩個矩形框，作為辨識位，分別命名為上端、下端。如圖所示：

可以新增在頁面上，也可以新增在外層面板內部，接下來新增限制事件。

好大功告成，這樣就實現了拖拽滾動頁面，到頂部後自動回彈的效果。最後總結下其實非常的簡單，就是在動態面板中巢狀動態面板，然後在動態面板中的拖動事件中來移動內層面板的方式來模擬手指移動滑動的效果，最後通過兩個矩形框的限制達到限制移動範圍並回彈的目的。

趕緊試試吧。

同樣方法可以做手機橫向滑動效果。要做瀏覽的效果可以參看知乎中方法他這有個缺點就是沒加限制，如上方法新增限制就可以了，只是在新增矩形的時候可以將右側的矩形框新增到手機邊框外，避免拖出手機邊框。