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

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協議