本文仔細介紹了中繼器制作手機版內容分享原型的步驟與注意要點，希望對你有所啟發。

hello，今天教大家如何用中繼器做一個類似微博的內容分享原型，里面的內容從0-9張圖片的格式都設置好了，我們只需要填寫中繼器表格，就可以完成交互，方便以后使用，所以非常推薦給大家。

0-9圖的樣式大家可以在演示界面自己查看，你使用的時候不需要選擇，系統會根據您在中繼器表格內導入的圖片自動生成，而且文字、圖片、案例都會自動擺放好。

效果演示

演示地址：https://axhub.im/ax9/22141be7a9ad6545/#id=k1ssqt&p=index

1. 上下滑動查看（鼠標拖動）

鼠標上下拖動可以滑動查看內容

2. 分享

這里做了一個模擬分享的界面

3. 點贊

點擊圖標可以點擊點贊或者取消點贊

制作教程

1. 制作材料

如下圖所示，需要一個圖片作為頭像，然后name文本框，時間來源文本框、正文內容文本框、轉發數文本框、評論數文本框、和點贊數文本框。

除此之外還有黃色區域的圖片組，1-9圖圖片組是隱藏的，下面會分別介紹樣式。

1圖樣式：

2圖樣式：

3圖樣式：

4圖樣式：

5圖樣式：

6圖樣式：

7圖樣式：

8圖樣式：

9圖樣式：

2. 中繼器表格制作

如下圖所示，16列

name：中繼器每項加載時，設置name文本框的值=item.name

photo：在中繼器內右鍵導入頭像圖片即可。中繼器每項加載時，設置頭像照片的值=item.picture

come：中繼器每項加載時，設置時間來源文本框的值=item.come

text：中繼器每項加載時，設置正文內容文本框=item.text。

picture1-9：同樣也是右鍵導入圖片即可。然后這里要做判斷，如果有9張圖片就顯示9圖的組合，8張圖就顯示8圖組合……1圖就顯示1圖組合，沒有圖片就不顯示圖片組合。然后在設置對應的圖片為item.1-9的值即可。

zhaunfa：設置轉發數文本框=item.zhuanfa

pinglun：設置評論數文本框=item.pinglun

dianzan：設置點贊數文本框=item.點贊

3. 自動排版事件

這里我們要做自動排版，不然的話如果文字內容多了，就會被圖片擋住了。我們要做一下幾個事件交互。

（1）圖片組移動

根據輸入文字內容的長短，要做一個自適應，然后再移動下面紅框的圖片組合到對應的地方。

怎么做文本框的自適應呢?大家可以參考我之前的文章《Axure教程：用中繼器做聊天對話界面》。

做完自適應之后，需要移動圖片組合至文本下方的位置即可。

（2）功能區自動移動

下圖所示，紅框的我們叫功能區，因為3圖和9圖的大小是不一樣的，所以設置完圖片之后，我們要移動功能區。這里要分兩種情況，第一種是，如果一張圖片都沒有，那我們移動到正文文本下面即可；第二種情況是有圖片，那我們事先吧9個圖組組合成1個大圖片組，然后移動到大圖片組下面即可。

好了今天的分享到這里就結束了，希望大家可以點點訂閱，收藏一下文章，作者會定期分享一些原型的案例哈。88

本文由 @梓賢Vigo 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Unsplash，基于CC0協議