跟着https://www.jianshu.com/p/0e4ddfaa1dc0做了一遍
1 固定导航栏
需要用到动态面板固定到浏览器的功能,因此需要先把组成固定导航栏的原件转化成动态面板,然后在右侧样式-固定到浏览器中进行相应的设置:
其中,动态面板-100%宽度勾选上的效果是:动态面板的宽度会自动变成浏览器的宽度,也会跟随浏览器宽度的变化而变化,根据这个特性可以轻松制作出元件的自适应效果,这个效果只在浏览器中有效。
2 左侧菜单栏制作
最终要实现的效果是通过左侧菜单栏实现控制右侧区域的滚动,所以先制作左侧菜单部分。
左侧菜单由1个矩形和若干个文本标签组成。首先由于菜单每次只能选中1个,所以需要将文本标签设置为选项组:选中所有文本标签-邮件-选项组、针对每个文本标签设置交互和样式。
同时左侧菜单需要一直悬浮在页面左侧,所以也需要第1章中的固定到浏览器的设置。
3 制作右侧滚动区内容
设置4个板块内容,分别进行分组及命名,和左侧的菜单保持一致。
4 锚点效果设置
为左侧菜单中各个文本标签设置锚点效果交互(以冰箱为例)
预览查看一下效果,发现冰箱板块直接滚到了游览器最上方的位置,被导航栏挡住了一部分。
为了解决这个问题,我们使用热区,一个透明的元件来解决:在每个板块的最上面加一个热区,把板块垫高,然后锚点滚动到相应板块的热区而不是直接滚动到某个板块就可以了。
5 通过滚动条滚动右侧部分,左侧菜单也对应高亮显示
上面的工作仅完成了一半,通过左侧的点击操作控制右侧的滚动。但是用户直接通过滚动条滚动右侧部分后,左侧的高亮显示也应该与右侧随之对应。
具体思路是:用一条透明的水平横线固定在浏览器页面的中央,当右侧滚动的板块接触到这根线,左侧菜单就选中对应的标签。
1.拖入一条【水平线】元件,颜色透明度设置为0%,将其右键转化为动态面板,点击【固定到浏览器】中,水平固定【左侧】,垂直固定【居中】,将此动态面板命名为「触发线」。
2.在右侧交互面板中选择【页面滚动时】的交互,点击【启用情形】,设置条件【元件范围-「触发线」-接触元件范围-「电视板块」】,添加动作【选中】左侧菜单的「电视」选项。
将所有的条件都加进去后