激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

Axure教程:明日之子投票界面交互動(dòng)效制作

發(fā)布時(shí)間：2024-01-18 20:36:07 瀏覽量：236次

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

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

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

（4）然后給中繼器-每項(xiàng)加載時(shí)添加用例并綁定數(shù)據(jù)庫數(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é)議

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請保持電話暢通！
確定