Axure教程:左侧导航如何自适应浏览器窗口高度?

访客4年前黑客文章1160

导读:自适应欣赏器窗口高度的意思是,欣赏器宽度、高度差异时,就显示条件匹配的视图页面内容。本文作者分享了用Axure实现左侧导航自适应欣赏器窗口高度的实用要领,但愿对各人有所辅佐。

Axure教程:左侧导航如何自适应欣赏器窗口高度?

上一篇Axure教程《Axure教程:导航栏如何自适应欣赏器窗口宽度?》,小默教给了各人顶部导航如何实现100%宽度,那么就会有同学要问了,横领导航能100%,那纵领导航也能100%吗?这个问题问得很有深度,这一节就给各人讲授一下左侧导航栏奈何实现100%高度的能力。

闲话少说,且看下文。

01

之一步,拖动一个动态面板至页面上,定名为“侧栏”;配置它的x,y均为0,等于左上角对齐,并置于底层;然后配置动态面板的巨细,宽度必需是实际导航的宽度,高度可随意。

Axure教程:左侧导航如何自适应欣赏器窗口高度?

拖动动态面板至页面上,定名为”侧栏“

Axure教程:左侧导航如何自适应欣赏器窗口高度?

动态面板置于底层,x,y均为0,巨细为300×170

02

第二步,在Axure右侧东西栏里的“属性”,点击<窗口尺寸改变时>,给当前页添加用例。这回不是在动态面板上点击右键选择100%了,而是要运用到变量。

Axure教程:左侧导航如何自适应欣赏器窗口高度?

双击<窗口尺寸改变时>

03

第三步,在弹出窗口中的“添加行动”列里,找到“配置尺寸”,点击选中;在“设置行动”列,勾选侧栏动态面板。

Axure教程:左侧导航如何自适应欣赏器窗口高度?

点击选中”配置尺寸“

Axure教程:左侧导航如何自适应欣赏器窗口高度?

勾选侧栏动态面板

04

第四步,重头戏来了,先清空宽和高的数值,(宽为空或为300时,暗示保持动态面板宽度的原值,就是之一步配置的300;虽然也可以修改为其他值,但在生成页面中是以修改值为实际宽度的。)然后点击高的<fx>,对高举办变量配置。

Axure教程:左侧导航如何自适应欣赏器窗口高度?

清空宽高数值,点击高的fx

05

第五步,接着重头戏未完,在弹出窗口中点击<插入变量或函数>,再在下拉菜单中选中<窗口>里的<Window.height>,然后点击窗口右下角的<确定>,配置完成。

Axure教程:左侧导航如何自适应欣赏器窗口高度?

点击<Window.height>

06

通过前面5步配置,就可以实现的左侧导航的100%高度了,但好像我们忘了一点,那就是给动态面板配置配景颜色,这里就不反复讲了,因为在上一讲已经有所提及,若有未学会的同学,可到B站搜索默林如斯事情室,前去进修视频教程。下面附上最终结果图,以竣事本次教程。

Axure教程:左侧导航如何自适应欣赏器窗口高度?

相关文章

人、证、号统一的背后:主播、MCN、平台各打小算盘

人、证、号统一的背后:主播、MCN、平台各打小算盘

编辑导语:这几年直播经济异常火爆,直播平台也此起彼伏的呈现,但直播的类型一直没有明晰;最近新规下发,如今直播需要人、证、号统一,这一划定对付行业有着必然的攻击;本文作者对此做出阐明,我们一起来看一下。...

如何讲一个能赚钱的营销好故事?

如何讲一个能赚钱的营销好故事?

持续在抖音看了三场老罗的直播,从第一场的几千万人大型围观,到二场的纷纷吆喝要倒台,再到第三场的数据趋稳,这场老罗与直男情怀粉丝的live故事越来越出色。 这些年,罗永浩叔叔干啥啥垮台的形象已相当深...

未来产品之路的猜想——VRAR篇

未来产品之路的猜想——VRAR篇

思考了很久,最终才决定写这篇文章,这是我感兴趣的一个赛道,并且也是很多产品和运营们关注的新的机会。虽然,还没到第二个大型风口的爆发点,但是5年内必然爆发,所以抛砖引玉,希望一些从业资深人员参与讨论,最...

用户画像:这组数据还原“吃货”本相

用户画像:这组数据还原“吃货”本相

糊口中,吃货是奈何一群人?本文通过大数据全面洞察了对美食类应用有高度乐趣偏好的群体,并通过APP聚类阐明,将“吃货”人群的用户画像举办了总结,与各人分享! 人世间,唯有爱与美食不行辜负。 许多年青人...

作业帮产品策略——作业帮的初期发展之路(以学霸君做对比)

作业帮产品策略——作业帮的初期发展之路(以学霸君做对比)

编辑导语:功课帮致力于为全国中小学生提供全学科的进修向导处事,自主研发多项进修东西,包罗照相搜题、功课帮直播课、作文搜索等;学霸君专注于中小学生在线1对1向导、人工智能、照相搜题。量身定制本性化进修方...

产品分析报告 | 小红书:内容+电商型产品

产品分析报告 | 小红书:内容+电商型产品

编辑导语:小红书是一个内容+电商的平台,不罕用户日常在纠结于买什么商品时城市上小红书翻阅条记,可是却很少在小红书长举办下单购置,就像小红书为其他电商平台做跳板的模式;本文作者对付小红书举办了具体的阐明...