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

效果演示

1. 自動(dòng)輪播效果

2. 點(diǎn)擊顯示大圖

使用說明

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

height：這張圖片的高度；

picture：右鍵導(dǎo)入圖片即可。

制作教程

（1）制作動(dòng)態(tài)面板

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

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

（2）制作中繼器

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

中繼器事件每項(xiàng)加載時(shí)：

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

設(shè)置圖片的值為item.picture。

（3）制作移動(dòng)效果

載入的向下移動(dòng)動(dòng)態(tài)面板2，移動(dòng)時(shí)間按需要設(shè)置。

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

向上移動(dòng)結(jié)束時(shí)，觸發(fā)向下移動(dòng)，無限循環(huán)即可。

（4）制作點(diǎn)擊放大圖片效果

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

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

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

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