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

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

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

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

滑動鼠標滑輪

第二種：偏移動端，準確來說應該叫拖動。按住鼠標左鍵，上下拖動。（注意看光標一直在移動）

按住鼠標左鍵拖動

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

一、PC滑動效果的實現

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

中繼器

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

中繼器+面板

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

設置滾動條

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

右側有滾動條的面板

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

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

然后我們F5看看效果，試著將鼠標指針移入頁面內，上下滑動鼠標滑輪：

實現了滾動

這樣就實現了滾動，但是有個滾動條是不是很丑？沒關系，看最后一步：

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

兩個面板

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

沒有滾動條了

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

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

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

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

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

中繼器放入面板中

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

兩個面板

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

套入面板

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

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

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

添加邊界

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

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

源文件下載：

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

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

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

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