中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：投票是很常見的功能之一，本文作者通過(guò)這篇文章教大家怎么用中繼器制作一個(gè)即方便使用，同時(shí)又具備高保真效果的投票原型，一起來(lái)看看吧。

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

原型地址：https://885vb9.axshare.com/#g=1

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

一、材料準(zhǔn)備

這個(gè)原型主要由頂部矩形標(biāo)題文本，投票次數(shù)文本、提示文本、以及中繼器制作而成。投票次數(shù)文本的作用是限制一天可以投票多個(gè)人，填寫限制的數(shù)字即可，案例中默認(rèn)為5；提示文本是用來(lái)提醒用戶當(dāng)天投票名額已經(jīng)全部用完了，相當(dāng)于一個(gè)小彈窗的作用。中繼器是里面最重要的元件，因?yàn)槲覀冇弥衅浯沃谱?，以后只需要填寫文字和?dǎo)入圖片，即可自動(dòng)生成效果。

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

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

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

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

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

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

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

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

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

二、交互制作

1. 中繼器每項(xiàng)加載時(shí)

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

2. 投票按鈕鼠標(biāo)單擊時(shí)

我們需要分條件討論：

第一種情況

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

①設(shè)置票數(shù)（文本標(biāo)簽）的值為原文本+1，因?yàn)橥镀敝笃睌?shù)肯定要增加的，如果我們是單獨(dú)不涉及增刪改查的原型，這樣簡(jiǎn)單做就可以了，但是如果涉及增刪改查，中繼器就會(huì)重新讀書，所以就要用更新行的事件，將piaoshu列的值更新為他原來(lái)的值+1。

②設(shè)置當(dāng)前按鈕的值為已投票，并且用禁用的交互，將投票的按鈕禁用，因?yàn)橹荒芡督o同一個(gè)人，所以我們要將他禁用，前面材料準(zhǔn)備的時(shí)候，我們有設(shè)置按鈕禁用樣式為灰色，所以就會(huì)變灰色

③設(shè)置投票次數(shù)的文本，因?yàn)橥读似?，所以名額又少一，所以設(shè)置投票次數(shù)的文本值為他原來(lái)的值減一。

第二種情況

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

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

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

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

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