最近在計劃連載一下關(guān)于axure中繼器的一些教程，通過動態(tài)面板，函數(shù)，中繼器來強化和交流一下對產(chǎn)品的一些看法。我個人的觀點是動態(tài)面板對應(yīng)產(chǎn)品的交互設(shè)計、產(chǎn)品架構(gòu)；函數(shù)對應(yīng)產(chǎn)品的業(yè)務(wù)邏輯，判定等；中繼器對應(yīng)數(shù)據(jù)結(jié)構(gòu)，數(shù)據(jù)類型等。

光說理論多沒意思，跟我一起吧，通過一邊看教程一邊加深對產(chǎn)品的理解吧。

其實這一篇和中繼器關(guān)系不大，主要是通過動態(tài)面板來設(shè)置兩種滑動方式。

第一種：偏PC端，用滾動條的方式，滑動鼠標(biāo)滑輪就可以實現(xiàn)（注意觀察圖中的光標(biāo)位置沒有變化）。

滑動鼠標(biāo)滑輪

第二種：偏移動端，準(zhǔn)確來說應(yīng)該叫拖動。按住鼠標(biāo)左鍵，上下拖動。（注意看光標(biāo)一直在移動）

按住鼠標(biāo)左鍵拖動

OK，廢話不多少。一步一步來吧，畢竟滑動效果在日常的工作中是經(jīng)常會用到的。

一、PC滑動效果的實現(xiàn)

首先，我們有了一個很長很長的中繼器（320*868），小伙伴也可以用一張很長很長的圖代替，其實是一個道理。我用的是iphone5的頁面尺寸（320*568），超過了頁面尺寸，所以我們要來做一個滑動效果。

中繼器

然后我們在中繼器的旁邊，拖入一個動態(tài)面板（320*568），就像下面一樣：

中繼器+面板

接著，我們來設(shè)置一下動態(tài)面板的屬性，滾動條——自動顯示垂直滾動條（圖片為初始值）

設(shè)置滾動條

面板就變成了下面這樣：因為滾動條占據(jù)了一定的寬度，我們就把面板拉寬一點點（具體多少后面可以調(diào)整）

右側(cè)有滾動條的面板

然后將中繼器放入動態(tài)面板（中繼器坐標(biāo)為0,0）中,如下圖：

中繼器進入了動態(tài)面板

然后我們F5看看效果，試著將鼠標(biāo)指針移入頁面內(nèi)，上下滑動鼠標(biāo)滑輪：

實現(xiàn)了滾動

這樣就實現(xiàn)了滾動，但是有個滾動條是不是很丑？沒關(guān)系，看最后一步：

在這個裝有中繼器的面板旁邊，再放一個面板（320*568），這個面板作用就是遮住滾動條，如下，

兩個面板

最后再將右邊裝有中繼器的面板放到左邊的面板內(nèi)，再點擊F5：

沒有滾動條了

OK，學(xué)一種滑動的伙伴們就可以看到這里了，這種比較簡單，也能模擬出常規(guī)的滑動效果，而且可以在手機端演示。還有一種滑動，有興趣的一起看看吧。

第二種：手機端，拖動滑動效果

首先我們在中繼器的旁邊，拖入一個大小相同的動態(tài)面板。（我的中繼器大小為320*868），如圖所示：

左側(cè)面板，右側(cè)中繼器，大小相等（面板尺寸也為320*868）:

然后將面板命名為：content，再將中繼器拖入面板中，如下圖：（動態(tài)面板的狀態(tài)一修改為repeat）

中繼器放入面板中

然后在裝有中級器的動態(tài)面板旁，拖入一個動態(tài)面板，尺寸為顯示界面的大小（320*568），命名為view。如下：

兩個面板

再將裝有中繼器的面板，放入到view（320*568）中，如下：

套入面板

然后需要我們來添加用例：

解釋：為view（320*568）面板添加用例，拖動時，移動面板content（裝中繼器的面板320*868），設(shè)置移動方向為垂直移動。

這樣就有了拖動的效果，我們再為它添加邊界：

添加邊界

解釋：在拖動view（320*568）的過程中其實是拖動content（320*868），所以我們要為content面板移動的距離添加邊界。上邊界下滑不能離開頂部，所以我們設(shè)置邊界（頂部小于等于0），即上邊界只能往上滑；下邊界上滑的界限是content面板和view面板的底部在同一y軸，則其頂部的最高位置為（868-568），因為在負軸所以是-300。

總結(jié)：兩種滑動各有優(yōu)劣，個人認為第一種更簡單，第二種更逼真。

源文件下載：

作者鏈接：http://pan.baidu.com/s/1c1KIia??密碼: dfec

官方鏈接：http://pan.baidu.com/s/1eSwmW18 密碼: hatx

作者：浩程君。簡書：七光年。

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