返回
快速导航关闭
当前搜索
网站分类
栏目推荐
实用工具
热门标签
子分类:
创奇学院 >电商平台 >天猫 >天猫教程 » 正文

天猫和淘宝哪个质量好,「Axure教程」天猫app-导航固定位置跟随窗口滚动

天猫教程 更新时间: 发布时间: 天猫教程归档 最新发布 网站地图

主要内容


在天猫APP中,窗口滚动到导航1时,导航1固定在浏览器的顶部,跟随窗口滚动,滚动到导航2时,导航2固定在浏览器的顶部,跟随窗口滚动,本课我们学习使用axure函数和页面交互事件来实现这个效果。


交互效果


1.窗口滚动到导航1位置时,导航1固定在浏览器的顶部,跟随窗口滚动。


2.窗口滚动到导航2位置时,导航2固定在浏览器的顶部,跟随窗口滚动。


一、原型制作


步骤1:

导入天猫频道首页的图片到编辑区,设置位置与大小,x:0,y:0,w:360,h:1570(因是范例,所以直接用图片代替)



步骤2:

导入导航1到编辑区,设置位置与大小:x:0,y:114,w:360,h:43(因是范例,所以直接用图片代替),命名:导航1



步骤3:

导入导航2到编辑区,设置位置与大小:x:0,y:512,w:360,h:44(因是范例,所以直接用图片代替),命名:导航2




二、设置页面“窗口滚动时”事件


步骤4:

用例1:双击页面交互下的“窗口滚动时”事件


第一步:编辑条件,选择“值”,点击后面的“fx”打开编辑文字窗口,选择窗口函数“Window.scrollY”,设置条件:[[Window.scrollY]]" ≥ "116"


第二步:选择“移动”


第四步:移动“导航1”到绝对位置,x:0,y:Window.scrollY


移动“导航2”到绝对位置,x:0,y:512



步骤5:

用例2:参考用例1,双击页面交互下的“窗口滚动时”事件,打开用例编辑器


第一步:编辑条件:设置条件:[[Window.scrollY]]" ≥ "512"


第二步:选择“移动”


第四步:移动“导航2”到绝对位置,x:0,y:Window.scrollY


移动“导航1”到绝对位置,x:0,y:114


选中用例2,选择“切换IF/ELSE IF”



步骤6:生成原型,预览效果



转载请注明:文章转载自 http://www.320g.com/
本文地址:http://www.320g.com/tmjc/12681.html
考高分网交流群

扫一扫加入QQ交流群

和更多志同道合朋友一起交流,分享干货资料!
创奇学院客服

扫一扫加客服微信

有疑问请咨询创奇学院微信号,在线为您解答!
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 Copyright 320g.com Rights Reserved. Powered · 创奇学院

ICP备案号:陇ICP备2020003353号