中繼器實(shí)戰(zhàn):Axure制作抓鬮

8 評(píng)論 7347 瀏覽 39 收藏 4 分鐘

本文試著用Axure制作抓鬮,一起來(lái)看看如何制作~

又到了午餐時(shí)間,吃什么……

(是時(shí)候換個(gè)工作了,附近餐館、外賣(mài)都吃膩了!)

抓鬮(基于中繼器的抓鬮)。

本次實(shí)戰(zhàn)涉及到以下幾點(diǎn):

  1. 中繼器新增行;
  2. 中繼器新增過(guò)濾器;
  3. 中繼器移除過(guò)濾器;
  4. 中繼器更新行;
  5. 中繼器刪除行。

效果如下:

創(chuàng)建中繼器:

中繼器中增加元件如下:

中繼器設(shè)置列如下:

中繼器設(shè)置交互如下:

操作中繼器

1、中繼器新增行

  • 初始化“排序字段元件”文字為0、每次新增成功后值+1;
  • 設(shè)置中繼器排序字段(order)為“排序字段元件”文字;
  • 設(shè)置中繼器name字段為輸入框文字。

2、中繼器新增過(guò)濾器

生成符合條件的隨機(jī)數(shù)。

Math.random(),返回介于 0 ~ 1 之間的一個(gè)隨機(jī)數(shù)。

Math.floor(),求一個(gè)浮點(diǎn)數(shù)的地板,就是求一個(gè)最接近它的整數(shù),它的值小于或等于這個(gè)浮點(diǎn)數(shù)。

LVAR1,“排序字段元件”文字……

新增過(guò)濾器設(shè)置排序字段等于生成的隨機(jī)數(shù)。

3、中繼器移除過(guò)濾器

4、中繼器更新行

這里設(shè)置的是輸入框失去焦點(diǎn)后自動(dòng)更新。

5、中繼器刪除行

因?yàn)檫@里刪除了所有行,所以設(shè)置條件為1==1;如果需要?jiǎng)h除,條件設(shè)置同中繼器新增過(guò)濾器。

案例訪問(wèn)地址:https://axhub.im/pro/32acf0e0782cceb6

 

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 元件名有點(diǎn)亂,看不懂

    來(lái)自廣東 回復(fù)
  2. 來(lái)自北京 回復(fù)
  3. 我用Axure8.01年多了,看了您的這邊指導(dǎo),表示最后還是沒(méi)看懂怎么使用中繼器來(lái)做出效果圖的原型。 ??

    來(lái)自上海 回復(fù)
    1. 同感

      來(lái)自湖北 回復(fù)
    2. 提供了源文件,可以下載

      來(lái)自北京 回復(fù)
    3. 我回家修改下,做精細(xì)化操作復(fù)盤(pán)給大家。

      來(lái)自北京 回復(fù)
    4. 提供了源文件,可以下載

      來(lái)自北京 回復(fù)