本文仔細(xì)介紹了中繼器制作手機(jī)版內(nèi)容分享原型的步驟與注意要點(diǎn)，希望對你有所啟發(fā)。

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

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

效果演示

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

1. 上下滑動查看（鼠標(biāo)拖動）

鼠標(biāo)上下拖動可以滑動查看內(nèi)容

2. 分享

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

3. 點(diǎn)贊

點(diǎn)擊圖標(biāo)可以點(diǎn)擊點(diǎn)贊或者取消點(diǎn)贊

制作教程

1. 制作材料

如下圖所示，需要一個圖片作為頭像，然后name文本框，時間來源文本框、正文內(nèi)容文本框、轉(zhuǎn)發(fā)數(shù)文本框、評論數(shù)文本框、和點(diǎn)贊數(shù)文本框。

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

1圖樣式：

2圖樣式：

3圖樣式：

4圖樣式：

5圖樣式：

6圖樣式：

7圖樣式：

8圖樣式：

9圖樣式：

2. 中繼器表格制作

如下圖所示，16列

name：中繼器每項(xiàng)加載時，設(shè)置name文本框的值=item.name

photo：在中繼器內(nèi)右鍵導(dǎo)入頭像圖片即可。中繼器每項(xiàng)加載時，設(shè)置頭像照片的值=item.picture

come：中繼器每項(xiàng)加載時，設(shè)置時間來源文本框的值=item.come

text：中繼器每項(xiàng)加載時，設(shè)置正文內(nèi)容文本框=item.text。

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

zhaunfa：設(shè)置轉(zhuǎn)發(fā)數(shù)文本框=item.zhuanfa

pinglun：設(shè)置評論數(shù)文本框=item.pinglun

dianzan：設(shè)置點(diǎn)贊數(shù)文本框=item.點(diǎn)贊

3. 自動排版事件

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

（1）圖片組移動

根據(jù)輸入文字內(nèi)容的長短，要做一個自適應(yīng)，然后再移動下面紅框的圖片組合到對應(yīng)的地方。

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

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

（2）功能區(qū)自動移動

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

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

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

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