利用Axure,快速搭建移动端水平滑动效果

本文介绍了如何利用Axure,快速搭建移动端水平滑动的效果,供大家参考学习,enjoy~

滑动导航是移动端常见的设计元素组合,因为分类内容多,需要向左右两边水平滑动来展示更多分类内容。

例如:内容分发类APP的顶部可滑动导航,电商类网站左右滑动商品列表。

上图滑动前后对比

简单类-顶部标签滑动效果

第一步:设置一个框 宽度375PX 高度40PX或者45px,作为滑动的边框。

第二步:设置文字交互样式(选中时边框仅底部可见,且边框颜色和文字颜色为橙色)设置鼠标点击时 选中该元件,并且设置统一的选项组,默认第一个推荐为选中状态,我们依次拷贝 其他文字,文化,学校,明星,财务等等 随便了,文字长度之和要大于375PX。

第三步:把导航文字邮件转化为动态面板,我案例中的动态面板长度为464px。

重点来了,添加案例:

在案例中,拖动时,设置水平移动该动态面板,必须要设定一个范围,不然可以左右无限拖动;

左侧边界最大值为0;默认都是向左移动,所以是负数;

左侧边界最小值-[[This.width-375]]。

再次将该动态面板右键转化为动态面板,设置宽度为375PX,OK 可以F5测试一下效果了。

复杂类-电商图文滑动效果

上图热门推荐版本,商品列表滑动前后对比;如何实现这种效果。

案例中图文列表横向排列,用的是中继器,只需画出一个,然后设置里横向排列,间隔20PX。

中继器选择了5个。

第一步:将这5个商品右键设置为动态面板起名内容1,再右键再次设置为动态面板起名内容,宽度设置为375px。

单击内容进入里面的一层“内容1”,设置左边间距为20px,如上图:

第二步: 添加用例

拖动时,水平移动,设置左右边界;

左边界小于20px;

左边界大于-[[This.width-375]]。

OK,设置完成,可以看看效果。

复杂类二-电商图文滑动效果

如上图,两个图切换,当向左滑动时,会判断距离超过一半,如果有,则停止滑动时,自动滑动至下一个图片位置。

和上例子一样,中继器4个占位图,两层动态面板,在里面一层面板设置。

设置边界,拖动时;

左边界小于[[This.width/4/2]];

左边界大于[[-(This.width-This.width/4/2)]];

添加用例,当移动大于[[-This.width/4/2]]时,移动中继器至0,0。

同理,移动其他位置时,[[-((This.width-20)/4*1+(This.width-20)/4/2)]];

移动中继器至相对位置。

设置完毕,可以看看效果!

 

本文由 @胖子 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处: 利用Axure,快速搭建移动端水平滑动效果