編輯指南：投票是常見的功能之一。通過這篇文章作者，我將告訴你如何制作一個易于用作中繼器的同時具有高保真效果的投票原型。

隨著移動端互聯(lián)網(wǎng)技術(shù)的發(fā)展，我們常常會在手機上投票。所以作者今天就教大家怎么用中繼器制作一個即方便使用，同時又具備高保真效果的投票原型，具體效果如下圖所示。

原型地址：

那下面我們一起開始制作吧。

一、材料準備

這個原型主要由頂部矩形標題文本，投票次數(shù)文本、提示文本、以及中繼器制作而成。投票次數(shù)文本的作用是限制一天可以投票多個人，填寫限制的數(shù)字即可，案例中默認為5；提示文本是用來提醒用戶當天投票名額已經(jīng)全部用完了，相當于一個小彈窗的作用。中繼器是里面最重要的元件，因為我們用中其次制作，以后只需要填寫文字和導(dǎo)入圖片，即可自動生成效果。

1. 中繼器內(nèi)部元件

在中繼器內(nèi)部，我們主要增加一下元件：

矩形（白色背景），圖片，序號（圓形），姓名（文本標簽），票數(shù)（文本標簽），投票按鈕（默認顏色為橙色，禁用樣式為灰色）。如下圖所示擺放即可：

2. 中繼器表格設(shè)置

中繼器表格內(nèi)總共4列：

no列對應(yīng)上面序號（圓形）的元件，按照123456……順序填寫即可；

pic列對應(yīng)上面的圖片元件，鼠標右鍵導(dǎo)入本地圖片，或者填寫url網(wǎng)絡(luò)地址即可；

name列對應(yīng)上面的姓名（文本標簽）的元件，填寫或者從excel表格導(dǎo)入均可；

票數(shù)列對應(yīng)上面的票數(shù)（文本標簽）的元件，填寫或者從excel表格導(dǎo)入均可。

二、交互制作

1. 中繼器每項加載時

我們要把中繼器表格內(nèi)4列的內(nèi)容分別設(shè)置到中繼器內(nèi)各個元件，這里主要用到設(shè)置文本和設(shè)置圖片的交互。首先用設(shè)置文本的交互，將no列、name列和票數(shù)列的值分別設(shè)置到序號（圓形）、姓名（文本標簽）和票數(shù)（文本標簽）的元件里；然后用設(shè)置圖片的交互，將pic列的值設(shè)置到圖片元件里。

2. 投票按鈕鼠標單擊時

我們需要分條件討論：

第一種情況

就是投票次數(shù)文本的值大于零，代表還有投票名額，可以繼續(xù)投票，這里我們就要做一下幾個交互：

①設(shè)置票數(shù)（文本標簽）的值為原文本+1，因為投票之后票數(shù)肯定要增加的，如果我們是單獨不涉及增刪改查的原型，這樣簡單做就可以了，但是如果涉及增刪改查，中繼器就會重新讀書，所以就要用更新行的事件，將piaoshu列的值更新為他原來的值+1。

②設(shè)置當前按鈕的值為已投票，并且用禁用的交互，將投票的按鈕禁用，因為只能投給同一個人，所以我們要將他禁用，前面材料準備的時候，我們有設(shè)置按鈕禁用樣式為灰色，所以就會變灰色

③設(shè)置投票次數(shù)的文本，因為投了票，所以名額又少一，所以設(shè)置投票次數(shù)的文本值為他原來的值減一。

第二種情況

就是上面的情況不成立，或者說投票次數(shù)文本的值等于零，代表已經(jīng)沒有投票名額，不可以繼續(xù)投票，那我們只需要顯示的交互，將默認隱藏的提示文本顯示出來，提醒用戶一天只能投五次票即可

這樣我們就制作完成了，以后我們需要使用的話，只需要在中繼器的表格里填寫數(shù)據(jù)和導(dǎo)入圖片即可，自動生成交互效果，是不是很方便呢？

以上就是本期的全部內(nèi)容了，感謝您的閱讀，我們下期見~88

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

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