Axure 教程:內(nèi)容展示——圖片墻

5 評論 5128 瀏覽 18 收藏 3 分鐘

今天教大家怎么做一個漂亮的圖片墻。該原型用中繼器做的,所以使用的時候只需要簡單填寫表格內(nèi)容即可,也可以當做學習中繼器交互的案例。如有喜歡該原型或者有什么疑問的都可以在評論區(qū)留言。

效果演示

1. 自動輪播效果

2. 點擊顯示大圖

使用說明

只需要填寫中繼器內(nèi)容即可。

height:這張圖片的高度;

picture:右鍵導入圖片即可。

制作教程

(1)制作動態(tài)面板

新建一個動態(tài)面板1,設置好大小,選擇背景色,案例中為黑色,取消自動調(diào)整內(nèi)容尺寸;

在這個動態(tài)面板1下,再新建一個動態(tài)面板2,該動態(tài)面板選中自動調(diào)整內(nèi)容尺寸,在動態(tài)面板2下面新建中繼器。

(2)制作中繼器

中繼器內(nèi)只需要新建一個圖片文件就可以,垂直布局,行距按自己需要設置,案例行距是27。中繼器表格如上圖所示。

中繼器事件每項加載時:

設置圖片的尺寸,案例中寬是177,高是item.height,你們也可以自己設置適合的。

設置圖片的值為item.picture。

(3)制作移動效果

載入的向下移動動態(tài)面板2,移動時間按需要設置。

向下移動結(jié)束時,觸發(fā)向上移動,同樣也是向上移動動態(tài)面板2。

向上移動結(jié)束時,觸發(fā)向下移動,無限循環(huán)即可。

(4)制作點擊放大圖片效果

新建一個大圖,點擊中繼器內(nèi)圖片時,顯示該大圖,然后設置圖片值=item.picture,再根據(jù)圖片設置顯示圖片的大小即可。

本期分享就完成了,如有喜歡該原型或者有什么疑問的都可以在評論區(qū)留言。

 

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

題圖來自 Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 原型預覽及下載地址:
    https://axhub.im/pro/2771739991b587c2/#g=1

    來自廣東 回復
  2. 圖片顯示失敗

    來自上海 回復
  3. 老師,請問一下,怎么自動擴充多列,填充滿動態(tài)面板一呢

    來自江蘇 回復
    1. 有個背景顏色可以選

      來自廣東 回復
  4. 樓主 提取碼是多少?

    來自浙江 回復