Question

Axure怎么制作滑动输入元件原型？

Answer 1

滑动输入法主要应用于数字的输入摆放即可。

三、交互制作1.动态面板拖动时交互动态面板拖动时，我们要实现以下几个效果：

1.1让动态面板跟随鼠标拖动而移动

我们用移动事件，选择跟随鼠标水平移动。这里需要注意的是，移动是用边界的。

左侧边界为，滑块中部圆心的x坐标不小于灰色滑条的x坐标；

右侧边界为，滑块中部圆心的y坐标不大于灰色滑条最右侧的坐标，最右侧的坐标其实就是灰色滑条的x坐标+他的宽度。

这里建议大家填写公式不要填写数字，如果填写数字的话，换个位置或者修改尺寸就要重新改这里的数字，复用性及差，如果用公式的话就没有这样的烦恼了。

1.2让蓝色滑条的尺寸随着滑块移动和改变

我们用设置尺寸的交互来实现。

首先是蓝色滑条的高度是不变的，所以我们直接用target.height函数就行了，这里用函数也是为了复用性，很多同学还是习惯写数字，这样做出来的原型往往复用性很差，导致工作效率很低，所以还是建议大家能写函数的劲量写函数。

然后是蓝色滑条的宽度，它的宽度其实就是等于滑块圆心的x坐标-灰色滑条的x坐标。

1.3设置分值和输入框的文本

最后我们还要根据滑块的文字设置分值和输入框对应的文本，那我们怎么计算出对应的数字呢，这里用到的是比值，我们用圆心的x坐标-灰色滑条的x坐标得到距离，用这个距离除灰色滑块的宽度得到比例，再用比例乘以最大值，就可以得到对应的分值了。最后我们还要用fixed函数四舍五入即可。

2.灰色滑条鼠标单击时事件鼠标点击灰色滑条的话，其实就是将滑块的原型移动到鼠标点击的位置，我们可以通过Cursor.x获取鼠标x坐标的值，然后通过移动事件，将动态面板移动到对应的位置即可。

移动完成后，其实我们只需要通过触发事件，触发动态面板拖动时事件，这样蓝色滑条和分值也会自动完成交互。不过作者发现Axure9的话好像还有bug，Axure8的话是没问题的。

如果你用的是axure9的话，那就也不怕，我们刚刚上面已经写好了设置蓝色滑条的尺寸和设置分值和文本框的文本的事件了，这里直接复制就可以了。不过前面用了this函数的要换成变量的形式即可。

3.蓝色滑条鼠标单击时事件因为蓝色滑条在灰色滑条上面，所以如果鼠标点击滑块左边区域的话，就会点到蓝色滑条。不过点击蓝色滑条的交互和点击灰色滑条交互是完全一样的，所以我们直接复制粘贴上面的交互就可以了，在这里就不在重复叙述了。

4.分值文本载入时的交互因为我们的滑块一开始是在滑条的中部，显示的分值也应该是最大值的一半，例如案例中最大值为100，分值初始显示的文本就应该是50。这里考虑到以后我们有可能改成1000或其他数字，那你就要将这里的文本改成500。

作者为了一劳永逸，所以用了设置文本的交互，在这个元件载入时，设置当前文本为最大值的一半，这样设置以后，就交给电脑自己完成，不用自己再改多一个地方了。

5.输入框的交互输入框就是为了满是用户对于填写精准数字的需求。

5.1载入时事件

和上面分值文本载入时的原理是一样，默认为最大值的一半，这里就不展开了。

5.2文本改变时

输入框的输入的内容是有要求的，第一，它必须是数字，这里我们可以通过输入类型选择数字来解决；第二他输入的范围要大于等于0且小于等于最大值文本，所以这里我们就要添加条件，如果输入框的文本小于0或者大于最大值，我们不能让他输入。

具体操作：通过设置文本让输入框内的文字无效，这里我们通常做法是取消最后一位，例如最大值为100，如果输入了999，这是设置文本为99。

这里就运用到substr和length函数，length函数是这段数字的长度（有多少个字），例如999的长度为3，我们在用substr，取文本第0为到length-1位的数字就可以了。如果觉得麻烦的话也可以直接设置为空值，让用户重新填写也可以。

5.3失去焦点时

失去焦点时，即用户确定了最终数字，所以我们要做3个交互：

设置分值文本，将分值文本设置为和输入框一致。

移动动态面板，根据比例移动动态面板到指定位置。首先我们用输入框的文本/最大值的文本得到比值，然后乘以灰色滑条的宽度，再加上灰色滑条的x坐标值，这就是滑块圆心要到达的具体位置。

设置蓝色滑条的宽度，其实上面已经计算出来了，就是输入框的文本/最大值的文本得到比值，然后乘以灰色滑条的宽度。

这样我们就完成了整个元件了，将他组合在一起，以后就可以直接复制或者从元件库用拖出来使用了，使用的时候如果最大值没有改变，直接使用即可；如果发生改变，只需要修改最大值文本就可以了

好啦，以上的内容就是“Axure怎么制作滑动输入元件原型？”的相关分享了，希望对你的Axure学习操作有一定的作用哦！学习Axure，一篇就学会是不大可能的，而几篇几十篇几百篇Axure文章就不一样了。学习更多Axure，Axure相关文章、问答、视频教程综合助力~很多专业的产品经理在于Axure这一块的学习都说到：看视频教程，最快最直接！所以，如果你也想快速学会Axure，推荐的Axure自学视频课程哦~