Axure教程:高保真的評論頁

2 評論 4110 瀏覽 12 收藏 6 分鐘

今天和大家分享怎么用中繼器制作評論頁。該原型使用方便,評論內容只需要填寫中繼器表格即可使用,而且交互齊全完善,所以推薦給大家使用。喜歡原型或者有疑問的小伙伴們可以在下方評論處給我留言哦。

原型預覽地址:https://ywix55.axshare.com(axshare會有點卡哦)

效果演示

1. 查看評論

可以敲回車鍵提交哦:

2. 評論文章

3. 回復評論1

4. 回復評論2

使用說明

該原型填寫中繼器表格即可直接使用。

no:按1、2、3排下去即可,如果是回復評論,序號和評論序號一致即可

picture:評論者的頭像,導入圖片即可

name:評論者的名字

huifu:具體是回復哪個人的,如果不填即評論文章

text:評論的內容

date:評論的日期

benren:一般為空,填寫之后代表這條是本人回復的,將用本人頭像和名字

制作方法

1. 評論中繼器制作

材料包括,頭像,name,text,時間,回復按鈕,回復組合(默認隱藏)?;貜徒M合包括多行文本框,取消回復和發布按鈕。

按下圖排列:

  • 點擊回復按鈕時:顯示回復組合;
  • 點擊取消回復按鈕時:隱藏回復組合;
  • 點擊發布按鈕時:if多行文本框的值≠空,新增行,并且隱藏回復組合。新增行邏輯下面在說。

2. 中繼器內交互

no:載入時按這個升序排列,當然你可以看需求,也可以按date的降序排列;

picture:每項加載時設置頭像圖片的值=item.picture;

name:每項加載時,設置名稱文本=item.name;

huifu:如果這個值不為空,設置name=target.text+回復+item.huifu;

date:設置時間文本=item.date;

benren:如果該值不為空的時候,顯示本人頭像置頂,設置名稱文本=本人的名字。(本人頭像和name可以自己設計)

3. 發布評論的交互

如果是評論文章,點擊發布按鈕,新增行:

  • no=中繼器data數+1
  • picture和name不用填,因為直接用本人的名稱和圖片
  • huifu也為空就行了
  • text=輸入框的text
  • date可以用日期函數獲取到現在的時間[[Now.getFullYear()]]/[[Now.getMonth()]]/[[Now.getDate()]]
  • benren=1

如果是回復別人的評論,點擊發布按鈕,新增行:

  • no=item.no
  • picture和name不用填,因為直接用本人的名稱和圖片
  • huifu=item.name
  • text=輸入框的text
  • date可以用日期函數獲取到現在的時間[[Now.getFullYear()]]/[[Now.getMonth()]]/[[Now.getDate()]]
  • benren=1

今天的分享就結束了,這個原型做起來可能對初學者會有點難,但是做好之后交互效果齊全,使用也簡單,只需要填寫中繼器表格即可。

所以推薦給大家使用,喜歡原型或者有疑問的小伙伴們可以在下方評論處給我留言哦。

 

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

題圖來自 Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 原型預覽及下載地址:
    https://axhub.im/pro/cacdc010b8fa4999

    來自廣東 回復
  2. 你好,請問我打開鏈接啥也沒有怎么辦

    來自山東 回復