宽度如何设置 滑动条_【Axure9百例】26.得到交互设计左右滑动

“ 左右滑动内容，并限制滑动的范围”

这是《Axure9百例》系列第26篇

在得到首页的TOP50/TOP100推荐榜单中，有课程、听书和电子书的推荐，共3项内容，可左右水平拖动，且只能在指定范围内拖动。

操作简单却又十分常见，知道怎么实现么？

这是演示效果：

01

—

界面布局

列表里的每项内容布局设计不作详细解释，在一个矩形框内有标题、头像和列表，这里准备了低保真的样式如下：

将内容全部选中，Ctrl+D键连续复制两个(或者Ctrl+C后按下Ctrl键拖动复制)，水平排列，修改文字内容。

这种水平列表的布局设计上需要明白一点，为什么第二项内容只显示了一半。现在可能稍微了解一点交互和设计的人都能看出来，目的是引导用户右侧还有内容，可以向左滑动，因为这种显示部分内容的设计，天性让我们下意识的向左边滑动继续查看。

最后，我们选中所有内容，右键转成动态面板，命名为list，然后再次右键将list转成动态面板，调整外层动态面板的宽度和屏幕一样宽。

思考：为什么转换两次动态面板？

这是比较常见有疑问的地方，详细解释一下：

1、外层的动态面板是为了限制内容的显示范围，这是它的样式特性，这里是设置为屏幕的宽度范围内，因为我们只需要在屏幕宽度内显示即可。

2、里层的内容列表也转换为动态面板是利用了它的事件特性，只有动态面板才支持拖动的事件。里面的动态面板是“自适应宽度”的，保持了原始内容的长度。

好了，布局就这样了。

02

—

交互处理

动态面板的拖动事件可以加在里层动态面板list上，也可以加到外层动态面板上，但拖动的对象要是里面的list。

这里我们把事件加到外面动态面板上，选择外层动态面板，新建交互：拖动时，添加移动动作，目标对象选择list，移动方式选择为跟随水平拖动，这样系统就会限制我们只能在水平方向上移动，避免拖动时上下偏离了水平位置。

接下来设置一下“更多选项”中的参数，用来限制拖动的水平范围。

我们首先要看一下列表的宽度和屏幕的宽度，然后来计算水平方向上限制的范围。

1、屏幕的宽度为414，但左位置是从10开始的，因此外层动态面板宽度显示为404

2、内容的列表的宽度为764

从列表list的位置来看，向右拖动时，只能拖动到初始位置，也就是左侧<=0

向左拖动时，要保证第3项内容在屏幕上完全可见，因此位置就是764-404=360，也就是向左偏移360，即左侧>=-360，可以适当放宽一点，让右侧多空出些位置，考虑左侧>=-370。(也可以通过设置右侧的位置来限制范围，留给勤奋的你来试试)

大功告成，来试下。。

03

—

小结

这个案例主要是应用了动态面板的两个特性，一个是样式特性，显示固定区域的内容，另一个是事件特性，支持拖动事件。

这里注意一下，有的人可能发现“为啥我的移动的设置里看不到跟随水平拖动的选项？”，这个选项只在“拖动时”事件里有，在“开始拖动时”事件里是没有的。

留下小问题，下面的交互细节更能体现拖动时的趣味性：

1、如何在向右拖动超过位置0时，自动弹回到原处？

2、相反，如何在向左拖动超过最右边位置时，自动弹回？

今天是不是又进步了一点点~给自己点个赞~

往期回顾

【Axure9百例】25.得到交互设计-返回顶部

【Axure9百例】24.得到交互设计-底部导航菜单

【Axure9百例】23.侧边栏的显示和隐藏