Axure教程:中繼器實(shí)現(xiàn)評論的增與刪
在一些清晰的交互中,往往能夠節(jié)省很多語言的描述,Axure中的中繼器能夠很好的完成這一點(diǎn)。對評論列表進(jìn)行增和刪的操作,是如何完成的呢?下面將清晰的展示整體的操作過程。
展示效果:
準(zhǔn)備工作
編輯中繼器
(1)在元件庫中拖動(dòng)中繼器到原型界面上,拖動(dòng)后會看到如右圖所示。
(2)雙擊拖動(dòng)后的中繼器可以進(jìn)入到中繼器的編輯頁面,在編輯頁面中添加需要的控件。
3、添加時(shí)給每個(gè)控件添加上對應(yīng)的名字,最好用英文或者拼音表示,比較好記,我在這里分別添加為img,name,time,content。
編輯內(nèi)容
(1)操作完上面的步驟后,點(diǎn)擊關(guān)閉按鈕。會發(fā)現(xiàn)三行中元素顯示都相同了,為中繼器上添加內(nèi)容,點(diǎn)擊中繼器,在style下會發(fā)現(xiàn)如下所示:
(2)我們將右側(cè)的內(nèi)容加以修改,在右側(cè)我們把第一行修改為了元件的名字,并都添加了相應(yīng)的內(nèi)容,第一列img的位置,右鍵需要導(dǎo)入圖片的位置,會有導(dǎo)入圖片的按鈕,點(diǎn)擊即可。
將內(nèi)容插入中繼器
(1)進(jìn)行了上面的基本操作后,我們需要將右側(cè)的內(nèi)容,插入到左側(cè)的中繼器中,選中中繼器,添加用例,多圖預(yù)警。
點(diǎn)擊ok中繼器中的名字被修改成功,如圖所示:
(2)修改時(shí)間和評論內(nèi)容的步驟和上面相同,只需要注意setText ->time=item.time,setText->content=item.content即可。設(shè)置圖片時(shí)與設(shè)置文字內(nèi)容存在一定的差異性,看圖:
點(diǎn)擊ok,圖片修改成功,完成后的最終結(jié)果如圖:
增加評論
在中繼器外增加相同的元件,并增加一個(gè)發(fā)布按鈕。
給元件增加名字(其中發(fā)布按鈕不用加),注意這里的名字不能與上面的相同。
給發(fā)布按鈕添加事件,點(diǎn)擊發(fā)布按鈕時(shí),中繼器增加一行。
點(diǎn)擊添加的行,給行里的字段賦值。
給name賦值,先添加局部變量,讓局部變量=this.xingming(也就是給name起的名字)。
點(diǎn)擊上方的按鈕將name,值為LVAR1。
刪除評論
刪除單個(gè)評論
(1)在中繼器內(nèi)增加刪除按鈕
(2)給刪除按鈕增加選中和刪除行的事件
批量刪除
(1)在中繼器上增加復(fù)選框
(2)批量刪除思路:復(fù)選框被選中意味著此條評論被選中,點(diǎn)擊批量刪除的時(shí)候,刪除所有被選中的評論。
給選中按鈕添加事件(上面都是一步一步添加的,在這里省略中間的步驟)。
本文由 @月半警長 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
- 目前還沒評論,等你發(fā)揮!