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

本文以明日之子投票界面為例，拆解了其中的交互動(dòng)效，并具體分析了每一個(gè)交互動(dòng)效的操作步驟。

最近在追明日之子每天瘋狂給妹妹點(diǎn)贊，所以嘗試下投票界面的制作，分享給大家，這是我發(fā)布的第一篇文章，歡迎各位產(chǎn)品前輩批評(píng)指正！

預(yù)覽效果鏈接：https://h3i5no.axshare.com

效果展示：

一、分析交互動(dòng)效

大致分為以下三個(gè)步驟：

1. 中繼器的制作，綁定數(shù)據(jù)（包括選手的頭像、姓名、排名、點(diǎn)贊數(shù)）。
2. 點(diǎn)贊事件的創(chuàng)建，及導(dǎo)致票數(shù)的改變。
3. 根據(jù)點(diǎn)贊數(shù)排名，調(diào)整數(shù)據(jù)顯示位置。

二、制作交互動(dòng)效

1. 中繼器的制作及綁定數(shù)據(jù)

（1）創(chuàng)建一個(gè)“中繼器”，雙擊進(jìn)入編輯界面，設(shè)計(jì)展示選手信息如下：選手頭像、選手姓名、排名、點(diǎn)贊數(shù)（記得設(shè)置好名稱，以便后面操作）。

（2）這里我創(chuàng)建了9組數(shù)據(jù)，每行顯示三個(gè)，一共三行；點(diǎn)擊index里的中繼器，在樣式中將布局勾選“水平”、“排布網(wǎng)絡(luò)”，并設(shè)定每row項(xiàng)目數(shù)為3。

（3）設(shè)定數(shù)據(jù)庫(kù)數(shù)據(jù)并綁定給中繼器：姓名：nam、點(diǎn)贊數(shù)：Num，排名比較特殊，是插入變量里的index，index是直接獲取當(dāng)前數(shù)據(jù)的行號(hào)；這里隨便輸了些假數(shù)據(jù)，我沒有設(shè)置頭像，有需要的同學(xué)可以再添加一列img并導(dǎo)入圖片。

（4）然后給中繼器-每項(xiàng)加載時(shí)添加用例并綁定數(shù)據(jù)庫(kù)數(shù)據(jù)。

2. 點(diǎn)贊事件的創(chuàng)建，及導(dǎo)致票數(shù)及排名的改變

（1）進(jìn)入中繼器的編輯界面，為點(diǎn)贊按鈕設(shè)置交互用例，點(diǎn)贊會(huì)觸發(fā)三個(gè)改變：

• 一是點(diǎn)贊數(shù)：Num
• 二是選手排名的位置
• 三是排名：index，index會(huì)根據(jù)排名順序自動(dòng)更新，這里不需要我們做交互。

（2）為中繼器“添加排序”，按照點(diǎn)贊數(shù)Num的數(shù)量進(jìn)行降序排列。

（3）為中繼器數(shù)據(jù)集“更新行”，點(diǎn)贊數(shù)：Num=Num+1。

預(yù)覽效果鏈接：https://h3i5no.axshare.com

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

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