axure怎么實(shí)現(xiàn)多張圖片同區(qū)域左右滑動(dòng)顯示效果?

百度經(jīng)驗(yàn) 發(fā)布時(shí)間：2019-05-10 14:47:25 作者：i夏茉

axure怎么實(shí)現(xiàn)多張圖片同區(qū)域左右滑動(dòng)顯示效果？手機(jī)app中經(jīng)常能看到多張圖片是滑動(dòng)顯示的，該怎么制作這個(gè)原型？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下

現(xiàn)在很多app，無(wú)論是寬屏還是窄屏，為了在同一個(gè)頁(yè)面展示多點(diǎn)內(nèi)容，類似于圖片類的內(nèi)容，都可以通過在區(qū)域內(nèi)左右滑動(dòng)顯示更多，既好看又可以減少跳轉(zhuǎn)，這個(gè)效果我們可以使用axure來(lái)制作，下面我們就來(lái)看看詳細(xì)的教程。

Axure RP 9 V9.0.0.3611 漢化安裝版(附漢化包)

類型：輔助設(shè)計(jì)
大?。?/span>219MB
語(yǔ)言：簡(jiǎn)體中文
時(shí)間：2018-10-29

查看詳情

1、如圖所示，以四個(gè)圖為例。首先大家準(zhǔn)備四個(gè)寬一樣的圖片（當(dāng)然不一樣也可以，就是移動(dòng)的尺寸需要根據(jù)需要計(jì)算）；

為了確定位置及效果，我在123圖的下面加了一個(gè)底，寬為600，在兩側(cè)預(yù)留20px的位置，各放置兩個(gè)15*15的圖標(biāo)，做激發(fā)操作的按鈕。

以四個(gè)圖為例，實(shí)例中的每個(gè)圖寬180px，為四個(gè)圖命名1234，并將圖123之間的間距調(diào)整為10，123為顯示，4為隱藏（屬性），圖4放置在底圖最右邊的邊緣位置；

注：為了很明確的位置，大家可如圖中一樣，通過工作窗口的邊緣拖出輔助線做幫助。

2、實(shí)現(xiàn)在顯示區(qū)域展示圖234，隱藏圖1效果（右側(cè)按鈕圖標(biāo)用例）。選中右側(cè)按鈕，“鼠標(biāo)點(diǎn)擊時(shí)”-添加用例；在彈出窗口點(diǎn)擊“元件”下的“移動(dòng)”，在最右側(cè)“配置動(dòng)作”進(jìn)行1234的配置，具體內(nèi)容如下：

圖1的處理：

選中1，下方“移動(dòng)”選“經(jīng)過”X設(shè)置值為-200（值的算法：圖1距離底圖的左側(cè)邊緣為20，+圖片本身的寬度，由于是往左移動(dòng)，所以是負(fù)數(shù)）；為了防止圖片一致移動(dòng)，為每個(gè)圖片設(shè)置邊界值，圖1設(shè)置邊界值，左側(cè)>120;保證點(diǎn)擊切換按鈕的時(shí)候，圖標(biāo)不沖出底圖的顯示區(qū)域

圖2:的處理：

選中2，下方“移動(dòng)”選“經(jīng)過”X設(shè)置值為-190（間距10+180,也就是說圖2移動(dòng)到圖1的位置）；左側(cè)>120;

圖3的處理：

選中3，下方“移動(dòng)”選“經(jīng)過”X設(shè)置值為-190（間距10+180,也就是說圖3移動(dòng)到圖2的位置）；左側(cè)>310;

圖4的處理：

選中4，下方“移動(dòng)”選“經(jīng)過”X設(shè)置值為-200（圖片本身的寬度+圖標(biāo)占據(jù)的位置，也就是說圖4移動(dòng)到圖3顯示）；左側(cè)>500;

隱藏顯示的設(shè)置：同用例（case1）下，元件-顯示/隱藏，圖1設(shè)置為隱藏，圖4設(shè)置為顯示；

確定。