--本篇导航--
- 鼠标指针的属性(滑动解锁)
- 图片滑动解锁
- 字符串(验证手机号、邮箱,查找替换)
鼠标指针的属性
在Axure中可以控制鼠标指针的坐标、移动距离、拖拽属性。
Cursor.x |
获取鼠标当前位置的X轴坐标 |
Cursor.y |
获取鼠标当前位置的Y轴坐标 |
DragX |
获取鼠标在水平方向的移动距离(0.01秒) |
DragY |
获取鼠标在垂直方向的移动距离(0.01秒) |
TotalDragX |
整个拖动过程中,鼠标指针在水平方向上移动的距离 |
TotalDragY |
整个拖动过程中,鼠标指针在垂直方向上移动的距离 |
DragTime |
鼠标拖动操作的总时长。从鼠标按下左键到释放左键的总时长,中间过程中,如果未移动鼠标位置,也计算时长(单位:毫秒) |
滑动解锁
最终效果:
实现步骤:
基本元素如下:
由于此交互涉及到拖动元件,具有拖动交互的是动态面板,所以将滑块右键-转为动态面板了。
整体操作有:
拖动滑块:
向右拖动(未到解锁区域):水平移动滑块,并将底部滑块进度进行水平拉伸
向右拖动(已经到解锁区域):解锁成功(跳转页面或弹出提示信息)
向左拖动:如果在起始位置(滑块左侧=背景区域左侧)再向左拖动滑块是拖动不了的,即此时将滑块位置设定在初始位置
松开滑块:
滑块未到解锁区域:此时松开滑块,滑块应自动滑动回初始位置,底部滑块进度的长度恢复到初始值
滑块已经到解锁区域:此时松开滑块,应解锁成功(跳转页面或弹出提示信息)
图片滑动解锁
最终效果:
实现步骤:
基本元素如下:
整体操作有:
拖动滑块:
向右水平拖动滑块,拖动的范围为底部滑块进度的左右边界。
拖动滑块的同时,移动区域也跟随拖动。
拖动结束:
拖动到目标区域附近(扩大点目标区域范围,增加容错±6),则解锁成功并跳转页面。
拖动结束未达到目标区域附近时,解锁失败,滑块和移动区域回复到初始位置,并提供解锁失败的文字提示。
字符串
length |
获取当前文本对象的长度,即字符长度,1个汉字的长度按 1 计算 |
charAt(index) |
获取当前文本对象指定位置的字符,index为≥0 的整数,字符位置从0开始计数,0为第一位 |
charCodeAt(index) |
获取当前文本对象种指定位置字符的Unicode编码(中文编码段19968~40622)字符起始位置从 0 开始,index为≥0 的整数 |
concat('string') |
将当前文本对象与另一个字符串组合,string为组合后显示在后方的字符串 |
indexOf('searchValue',start) |
从左至右查询字符串在当前文本对象种首次出现的位置。未查询到,返回值为 -1 |
lastIndexOf('searchvalue',start) |
从右至左查询字符串在当前文本对象种首次出现的位置。未查询到,返回值为 -1 |
replace('searchvalue','newvalue') |
用新的字符串替换文本对象中指定的字符串 |
slice(start,end) |
从当前文本对象种截取从指定位置开始到指定位置结束之间的字符串。start为截取部分的起始位置,可为负数,负数时表示从文本对象的尾部开始,-1表示末位,-2表示倒数第二位;end为截取部分的结束位置,可省略,省略表示从截取位置开始至文本对象的末尾,但提取的字符串不包含结束位置。 |
split('separator',limit) |
将当前文本对象中与分割字符相同的字符转为",",形成多组字符串,并返回从左开始的指定组数。如11:22:33用split(':')后,则得到11,22,33 |
substr(start,length) |
当前文本对象中从指定起始位置截取一定长度的字符串。 start为截取的起始位置;length为截取长度,该参数可省略,省略则表示从起始位置一直截取到文本对象末尾 |
substring(from,to) |
从当前文本对象中截取从指定位置开始到另一指定位置区间的字符串。to为指定区间的结束位置,可省略,省略表示从起始位置截取到文本对象的末尾,但提取的字符串不包含末位。 |
toLowerCase() |
将文本对象中多有的大写字母转换为小写字母 |
toUpperCase() |
将文本对象中多有的小写字母转换为大写字母 |
trim() |
删除文本对象两端的空格 |
toString |
将一个逻辑值转换为字符串 |
验证手机号
最终效果:
实现步骤:
给验证按钮加判断,手机号格式判断条件如下:
- 长度:11
- 首位数字必须为:1
- 第二位数字必须为:3~9 之间的数,即不等于0、1、2
更丰富的如清除按钮、悬停、选中、自动获取焦点等操作,在前面《Axure交互效果1》中有涉及。
验证邮箱
最终效果:
实现步骤:
给验证按钮加判断,邮箱格式判断条件如下:
- 邮箱不能包含多个@
- 首位必须是字母或数字
- @和 . 不能是相邻的
查找替换
最终效果:
实现步骤:
标签:变量,滑块,鼠标,拖动,解锁,位置,Axure,文本,函数 From: https://www.cnblogs.com/11sgXL/p/18637832