中繼器實(shí)戰(zhàn):Axure制作抓鬮
本文試著用Axure制作抓鬮,一起來(lái)看看如何制作~
又到了午餐時(shí)間,吃什么……
(是時(shí)候換個(gè)工作了,附近餐館、外賣(mài)都吃膩了!)
抓鬮(基于中繼器的抓鬮)。
本次實(shí)戰(zhàn)涉及到以下幾點(diǎn):
- 中繼器新增行;
- 中繼器新增過(guò)濾器;
- 中繼器移除過(guò)濾器;
- 中繼器更新行;
- 中繼器刪除行。
效果如下:
創(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é)議
評(píng)論
元件名有點(diǎn)亂,看不懂
Axure源文件下載
https://pan.baidu.com/s/1XgMk_h2qhakmvs9HYoAqZw
我用Axure8.01年多了,看了您的這邊指導(dǎo),表示最后還是沒(méi)看懂怎么使用中繼器來(lái)做出效果圖的原型。 ??
同感
提供了源文件,可以下載
我回家修改下,做精細(xì)化操作復(fù)盤(pán)給大家。
提供了源文件,可以下載