本文要跟大家讲的是,如何利用制作左右设限滑块页眉菜单栏,一起来看看~
![a3c047ff06f2974d1aa54e0a24215884.png](https://i-blog.csdnimg.cn/blog_migrate/8d3ef916e5fa682034550d831381716f.jpeg)
1. 页面布局
页面设定
新建一个页面,命名为【左右设限滑块页眉菜单栏】。
![1a48a77e11b07f4f52b75f408a682ef2.png](https://i-blog.csdnimg.cn/blog_migrate/36ef3a18641b87bfd3ec7cb37d32f73d.jpeg)
在【左右设限滑块页眉菜单栏】内新建命名为【【左右设限滑块页眉菜单栏】的动态面板,动态面板的【State1】更改为【全部】,在【全部】内新建一个命名为【右浮图标】的【组合文件】和一个命名为【切换菜单】的【动态面板】,【切换菜单】内的【State1】更改【文本】。
![1821d68df17c3ec86a7b18a50de97b50.png](https://i-blog.csdnimg.cn/blog_migrate/add672bac815c38601f5248d6d651c0f.jpeg)
![5986f65f0986ff3bb555d0a9d90f5cb4.png](https://i-blog.csdnimg.cn/blog_migrate/ef476ce4d24484f04b3b537ea1655919.jpeg)
(1)右浮图标
从元件库内分别拉入两个【矩形】元件分别做图标的图标背景1和图标背景2。
图标背景1的【填充】色为#ffffff,透明度为30%,图标背景2的【填充】色为#ffffff,透明度为90%,切图标背景2的X大于图标背景2X的8px,然后将图标嵌入图标背景1和图标背景2两者形成的半透明上下左右居中区域。
![77320ff297ab0bb0b693cc2e0a55ae37.png](https://i-blog.csdnimg.cn/blog_migrate/b714f5a133cf8a292a6309a65d8b7104.jpeg)
![a234381b4cc54de42bda4a182407ea6f.png](https://i-blog.csdnimg.cn/blog_migrate/ffc17c95be1ccbc7f5308de07c0cd831.jpeg)
![abe87418ce9537b9efebe3554a4ad14c.png](https://i-blog.csdnimg.cn/blog_migrate/173c1f014966d8bbe73d31c3c6417a09.jpeg)
(2)切换菜单
从元件库内分别拉入14个【文本标签】元件依次在切换菜单规定的区域范围内排序成行,并依次将内容更改为1至14的数字。
![80f8d1b7e7eed73d3c356a7802f96526.png](https://i-blog.csdnimg.cn/blog_migrate/1805dc09bd828137a6ec23945b8545a5.jpeg)
【文本标签】的【填充】色皆为透明,字体颜色#666666。
![c80c0d280ef9399f8f99cb29ec43bf8e.png](https://i-blog.csdnimg.cn/blog_migrate/f6ebf43d8b120e86c9b431076494b97d.jpeg)
2. 动态交互
效果设计
(1)图标交互样式设置
选中【图标】,进行【交互样式设置】,将鼠标悬停、鼠标按下、选中的交互样式的另一种状态的【图片】导入。
![b216e4b01ac33bc59bdd48631bc8f61c.png](https://i-blog.csdnimg.cn/blog_migrate/1b7f7d0cb475604d105c72b8ab36bfaa.jpeg)
(2)文本标签的交互样式设置
选中表现1至14个数字的【文本标签】元件,进行【交互样式设置】,将鼠标悬停、鼠标按下、选中的交互样式的【字体颜色】进行设置。
![312dc8a73a2313a5c76ad42e1f3fe095.png](https://i-blog.csdnimg.cn/blog_migrate/ec3b7ea4f915a00d9d71f5ce5ff3ea0f.jpeg)
(3)交互流程
1)实现左右设限滑块页眉菜单栏的动态交互
选中【左右设限滑块页眉菜单栏】动态面板内的【全部】,在【属性】中设定【向左拖动结束时】和【向右拖动结束时】的用例,配置相关的动作。
![7e50d24399ad4656fe099ee68d4b3783.png](https://i-blog.csdnimg.cn/blog_migrate/c14b0d1c93278a31921eacb4c804e6cd.jpeg)
![bf1814567f72de1ad938448d638d18ce.png](https://i-blog.csdnimg.cn/blog_migrate/eae5c546c0c7b79b7d1646ebd039dbf4.jpeg)
步骤一:设置【向左拖动结束时】用例的配置动作
在case1【组织动作】中添加【移动】动作,在【配置动作】内勾选【切换菜单】动态面板,设置【移动】为【经过】状态,x=-150,y=y,【动画】为【缓进缓出】,时间t=2000毫秒,【界限】中添加【左侧】边界,且大于等于-338。
![5cdde66882c96fd45c4e915e13915258.png](https://i-blog.csdnimg.cn/blog_migrate/018a43e5578963ad6dee8d6a38899449.jpeg)
步骤二:设置【向右拖动结束时】用例的配置动作
在case1【组织动作】中添加【移动】动作,在【配置动作】内勾选【切换菜单】动态面板,设置【移动】为【经过】状态,x=-200,y=y,【动画】为【缓进缓出】,时间t=2000毫秒,【界限】中添加【左侧】边界,且小于等于0。
![5d36b561de6b8b02751b755fe66c0b10.png](https://i-blog.csdnimg.cn/blog_migrate/75a5de6dc281f9a24f8aca2dccd0db31.jpeg)
预览效果
本文由 @卧枕江山 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议