精美横轴智能滚动条设计

1.相关介绍

全部产品所在的店铺地址：https://www.axureshop.com/shop/3039

与此相关的完整版高保真实战项目(UE&UI)原型设计(针对于全息中继器组件)地址：https://www.axureshop.com/a/249709.html

与此相关的完整版高保真实战项目(UE&UI)原型设计(PC端+手机端)地址（这个性价比很高，推荐路过的朋友购买）：https://www.axureshop.com/a/234122.html#comment-287804

与此相关的完整版高保真实战项目(UE&UI)原型设计(手机端)地址：https://www.axureshop.com/a/246479.html

与此相关的完整版高保真实战项目(UE&UI)原型设计(PC端)地址：https://www.axureshop.com/a/298707.html

本项目完整版高保真实战原型(UE&UI)设计(PC端)地址：https://www.axureshop.com/a/674824.html

1.1页面布局

1.1.1页面设定

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

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

1.1.1.1【底层背景】

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

1.1.1.2【table】

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

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

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

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

1.2动态交互

1.2.1效果设计

1.2.1.1列表效果的实现

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

1.2.1.2智能滚动条的实现

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

1.2.2交互流程

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

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

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

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

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

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

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

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

1.3预览效果

1.4结语

结语：请路过的朋友们多多支持哈，卧枕江山在这里先谢谢了，以后会有更多优质的文章和产品在这个平台上进行发布，请尽请期待呦！