精美横轴智能滚动条设计

从零开始学运营,10年经验运营总监亲授,2天线下集训+1年在线学习,做个有竞争力的运营人。了解一下

如何设计一款精美的横轴智能滚动条?本文对设计过程进行了详细地介绍。

页面布局

页面设定

新建一个页面文件,命名为【精美横轴智能滚动条设计】。

在【精美横轴智能滚动条设计】页面内新建一个命名为【table】的动态面板。

【底层背景】:

从元件库内将【矩形】元件拖入界面内,命名为【底层背景】。其长宽为=1030*640,背景颜色为#ffffff,有边框,边框粗为1px,边框颜色为#f2f2f2。

【table】:

将【table】内的【State1】改为【第一层】。

在【第一层】内新建一个动态面板,命名为【第二层】,并将【第二层】内的【State1】更改为【第三层】。

在【第三层】内新建一个组合文件,命名为【表格】,在【表格】内新建一个叫做【表头】的组合文件,并将多个【矩形】元件从元件库内拖入【表头】内,并进行设计。

从元件库内拖入一个【中继器】,命名为【表格内容】,并将多个【矩形】元件填充到中继器最底层。

动态交互

效果设计

列表效果的实现:

选中【表格内容】内的【矩形】元件,进行【交互样式设置】,将鼠标悬停、鼠标按下、选中的交互样式的【字体颜色】和【填充颜色】进行设置。

智能滚动条的实现:

选中【第三层】元件,将其【滚动条】的状态选择成【自动显示水平滚动条】,并将【第二层】的高度设置为大于【第一层】高度10px。

交互流程

实现中继器与矩形元件的数据绑定:

选中【表格】组合元件中【中继器】,在【属性】中设定【每项加载时】的交互用例,并配置相关的动作。

步骤一:设置【每项加载时】用例的配置动作

在case1【组织动作】中添加【设置文本】动作,在【配置动作】内勾选分别勾选要绑定的【矩形】元件,设置文本为【值】,切【值】(fx)=【[[Item.Column0]]】。

步骤二:【中继器】的数据填充

选中【中继器】,在【属性】的【中继器】表格区域进行数据方面的增删改查。

步骤三:设置【表格】显示的行数

选中【中继器】,在【样式】中更改【表格】需要展示的行数。

预览效果

结语

请路过的朋友们多多支持哈,笔者在这里先谢谢了,以后会有更多优质的文章和产品在这个平台上进行发布,请尽请期待呦!

 

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

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
2人打赏
评论
欢迎留言讨论~!
  1. 动态面板自动显示水平滚动条的样式根本就不是这样的,这教程都教的些啥?

    回复
    1. 我只给了其中做法之一,有好多做法,有简单的也有复杂的,如果你觉得这样不行,出一个教程让我们学习学习呗?

      回复
    2. 他这个教程其实还是使用了动态面板的水平滚动条,只不过是把滚动条用第一层的面板遮挡了,这样滚动条看上去就很细,没那么粗

      回复
    3. 是哒!兄台厉害!多谢帮忙回复 :oops:

      回复
  2. 在【第三层】内新建一个组合文件,命名为【表格】,在【表格】内新建一个叫做【表头】的组合文件 这一步怎么弄呢

    回复
    1. 这个表头就是一个个矩形组合起来的,给中继器当表头用的,就是列表的标题

      回复
    2. 多谢兄台及时回答 :oops:

      回复