中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

滑動(dòng)鼠標(biāo)滑輪

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

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

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

一、PC滑動(dòng)效果的實(shí)現(xiàn)

首先，我們有了一個(gè)很長(zhǎng)很長(zhǎng)的中繼器（320*868），小伙伴也可以用一張很長(zhǎng)很長(zhǎng)的圖代替，其實(shí)是一個(gè)道理。我用的是iphone5的頁(yè)面尺寸（320*568），超過了頁(yè)面尺寸，所以我們要來(lái)做一個(gè)滑動(dòng)效果。

中繼器

然后我們?cè)谥欣^器的旁邊，拖入一個(gè)動(dòng)態(tài)面板（320*568），就像下面一樣：

中繼器+面板

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

設(shè)置滾動(dòng)條

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

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

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

中繼器進(jìn)入了動(dòng)態(tài)面板

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

實(shí)現(xiàn)了滾動(dòng)

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

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

兩個(gè)面板

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

沒有滾動(dòng)條了

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

第二種：手機(jī)端，拖動(dòng)滑動(dòng)效果

首先我們?cè)谥欣^器的旁邊，拖入一個(gè)大小相同的動(dòng)態(tài)面板。（我的中繼器大小為320*868），如圖所示：

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

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

中繼器放入面板中

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

兩個(gè)面板

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

套入面板

然后需要我們來(lái)添加用例：

解釋：為view（320*568）面板添加用例，拖動(dòng)時(shí)，移動(dòng)面板content（裝中繼器的面板320*868），設(shè)置移動(dòng)方向?yàn)榇怪币苿?dòng)。

這樣就有了拖動(dòng)的效果，我們?cè)贋樗砑舆吔纾?/p>

添加邊界

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

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

源文件下載：

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

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

作者：浩程君。簡(jiǎn)書：七光年。

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