Axure RP9教程:动态面板实现一个简单列表滚动效果

2020-07-0209:33:17原型设计Comments16,516 views字数 389阅读模式

一、说明

列表是PC及移动端比较常见的一种控件,我们通常会遇到一个列表,表头非常多,在显示器中无法显示完整,这时候我们就需要一种简单的滚动效果来实现他;还有一种就是分页大小操作一屏显示的时候我们也需要用到纵向滚动条。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19617.html

二、案例演示

  1. 没有滚动条效果:
    Axure RP9教程:动态面板实现一个简单列表滚动效果
    从这里我们明显看到没有滚动条的时候,分页大小超过外部矩形范围时,页面会自动撑开,体验非常不好。
  2. 设置滚动效果
    Axure RP9教程:动态面板实现一个简单列表滚动效果
    我们可以看到设置滚动条之后,列表的范围没有超出外部矩形框,那么这样一种效果怎么来实现,这里我们将会用到动态面板的两个属性来实现。

三、操作说明

  1. 在画布添加一个列表及外部矩形框,使列表中内容大于外部矩形框高度;
  2. 将列表创建动态面板,并将列表属性纵向滚动,将调整大小以适合内容默认勾选取消;
    Axure RP9教程:动态面板实现一个简单列表滚动效果
  3. 在调整动态面板的宽高,使动态面板与外部矩形切合。

总结:这样用例的实现实际上就是应用了动态面板的两个属性来实现,分别为滚动方向取消调整大小以适合内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19617.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19617.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/19617.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定