本文介紹了如何利用Axure，快速搭建移動(dòng)端水平滑動(dòng)的效果，供大家參考學(xué)習(xí)，enjoy~

滑動(dòng)導(dǎo)航是移動(dòng)端常見的設(shè)計(jì)元素組合，因?yàn)榉诸悆?nèi)容多，需要向左右兩邊水平滑動(dòng)來(lái)展示更多分類內(nèi)容。

例如：內(nèi)容分發(fā)類APP的頂部可滑動(dòng)導(dǎo)航，電商類網(wǎng)站左右滑動(dòng)商品列表。

上圖滑動(dòng)前后對(duì)比

簡(jiǎn)單類-頂部標(biāo)簽滑動(dòng)效果

第一步：設(shè)置一個(gè)框 寬度375PX 高度40PX或者45px,作為滑動(dòng)的邊框。

第二步：設(shè)置文字交互樣式（選中時(shí)邊框僅底部可見，且邊框顏色和文字顏色為橙色）設(shè)置鼠標(biāo)點(diǎn)擊時(shí) 選中該元件，并且設(shè)置統(tǒng)一的選項(xiàng)組，默認(rèn)第一個(gè)推薦為選中狀態(tài)，我們依次拷貝 其他文字，文化，學(xué)校，明星，財(cái)務(wù)等等 隨便了，文字長(zhǎng)度之和要大于375PX。

第三步：把導(dǎo)航文字郵件轉(zhuǎn)化為動(dòng)態(tài)面板，我案例中的動(dòng)態(tài)面板長(zhǎng)度為464px。

重點(diǎn)來(lái)了，添加案例：

在案例中，拖動(dòng)時(shí)，設(shè)置水平移動(dòng)該動(dòng)態(tài)面板，必須要設(shè)定一個(gè)范圍，不然可以左右無(wú)限拖動(dòng)；

左側(cè)邊界最大值為0；默認(rèn)都是向左移動(dòng)，所以是負(fù)數(shù)；

左側(cè)邊界最小值-[[This.width-375]]。

再次將該動(dòng)態(tài)面板右鍵轉(zhuǎn)化為動(dòng)態(tài)面板，設(shè)置寬度為375PX，OK 可以F5測(cè)試一下效果了。

復(fù)雜類-電商圖文滑動(dòng)效果

上圖熱門推薦版本，商品列表滑動(dòng)前后對(duì)比；如何實(shí)現(xiàn)這種效果。

案例中圖文列表橫向排列，用的是中繼器，只需畫出一個(gè)，然后設(shè)置里橫向排列，間隔20PX。

中繼器選擇了5個(gè)。

第一步：將這5個(gè)商品右鍵設(shè)置為動(dòng)態(tài)面板起名內(nèi)容1，再右鍵再次設(shè)置為動(dòng)態(tài)面板起名內(nèi)容，寬度設(shè)置為375px。

單擊內(nèi)容進(jìn)入里面的一層“內(nèi)容1”，設(shè)置左邊間距為20px，如上圖：

第二步： 添加用例

拖動(dòng)時(shí)，水平移動(dòng)，設(shè)置左右邊界；

左邊界小于20px；

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

OK，設(shè)置完成，可以看看效果。

復(fù)雜類二-電商圖文滑動(dòng)效果

如上圖，兩個(gè)圖切換，當(dāng)向左滑動(dòng)時(shí)，會(huì)判斷距離超過(guò)一半，如果有，則停止滑動(dòng)時(shí)，自動(dòng)滑動(dòng)至下一個(gè)圖片位置。

和上例子一樣，中繼器4個(gè)占位圖，兩層動(dòng)態(tài)面板，在里面一層面板設(shè)置。

設(shè)置邊界，拖動(dòng)時(shí)；

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

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

添加用例，當(dāng)移動(dòng)大于[[-This.width/4/2]]時(shí)，移動(dòng)中繼器至0,0。

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

移動(dòng)中繼器至相對(duì)位置。

設(shè)置完畢，可以看看效果！

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

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