利用Axure,快速搭建移動端水平滑動效果

本文介紹了如何利用Axure，快速搭建移動端水平滑動的效果，供大家參考學習，enjoy~

滑動導航是移動端常見的設計元素組合，因為分類內容多，需要向左右兩邊水平滑動來展示更多分類內容。

例如：內容分發類APP的頂部可滑動導航，電商類網站左右滑動商品列表。

上圖滑動前後對比

簡單類-頂部標籤滑動效果

第一步：設置一個框 寬度375PX 高度40PX或者45px,作為滑動的邊框。

第二步：設置文字交互樣式（選中時邊框僅底部可見，且邊框顏色和文字顏色為橙色）設置滑鼠點擊時 選中該元件，並且設置統一的選項組，默認第一個推薦為選中狀態，我們依次拷貝 其他文字，文化，學校，明星，財務等等 隨便了，文字長度之和要大於375PX。

第三步：把導航文字郵件轉化為動態面板，我案例中的動態面板長度為464px。

重點來了，添加案例：

在案例中，拖動時，設置水平移動該動態面板，必須要設定一個範圍，不然可以左右無限拖動；

左側邊界最大值為0；默認都是向左移動，所以是負數；

左側邊界最小值-[[This.width-375]]。

再次將該動態面板右鍵轉化為動態面板，設置寬度為375PX，OK 可以F5測試一下效果了。

複雜類-電商圖文滑動效果

上圖熱門推薦版本，商品列表滑動前後對比；如何實現這種效果。

案例中圖文列表橫向排列，用的是中繼器，只需畫出一個，然後設置裡橫向排列，間隔20PX。

中繼器選擇了5個。

第一步：將這5個商品右鍵設置為動態面板起名內容1，再右鍵再次設置為動態面板起名內容，寬度設置為375px。

單擊內容進入裡面的一層「內容1」，設置左邊間距為20px，如上圖：

第二步： 添加用例

拖動時，水平移動，設置左右邊界；

左邊界小於20px；

左邊界大於-[[This.width-375]]。

OK，設置完成，可以看看效果。

複雜類二-電商圖文滑動效果

如上圖，兩個圖切換，當向左滑動時，會判斷距離超過一半，如果有，則停止滑動時，自動滑動至下一個圖片位置。

和上例子一樣，中繼器4個佔位圖，兩層動態面板，在裡面一層面板設置。

設置邊界，拖動時；

左邊界小於[[This.width/4/2]]；

左邊界大於[[-(This.width-This.width/4/2)]]；

添加用例，當移動大於[[-This.width/4/2]]時，移動中繼器至0,0。

同理，移動其他位置時，[[-((This.width-20)/4*1+(This.width-20)/4/2)]]；

移動中繼器至相對位置。

設置完畢，可以看看效果！

 

本文由 @胖子 原創發布於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議

收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}