下边教大伙儿怎么使用axure完成手机app中网页页面左右滚动的独特属性。

第一步:

(1)将矩形框拖到名叫“滚动实际效果”的网页页面,调节部位,将矩形框的总宽.相对高度.圆弧半经设定为326.640.38,进行一个手机原形的设定。

axure8破解安装教程-把汉化补丁放到游戏目录-第1张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

(2)在拖一个矩形框到上边搞好的图型中,设定矩形框宽为:320,高为:568,调节好部位,那样一个手机平面图就完成了。(2)将一个矩形框拖拽到图中,将矩形框的总宽设定为320,相对高度设定为568,并调节部位,那样就完成了一个手机平面图。

axure8破解安装教程-把汉化补丁放到游戏目录-第3张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

第二步:第二步:

(1)将一个动态面板拖拽到网页页面中,动态面板的尺寸和地点与上边的矩形框一致,动态面板的间距和相对高度各自为320和568。

axure8破解安装教程-把汉化补丁放到游戏目录-第5张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

(2)双击鼠标动态面板“State1”,进到到动态面板编写情况(2)双击鼠标动态面板“情况1”,进到动态面板编写情况。

axure8破解安装教程-把汉化补丁放到游戏目录-第7张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

(3)再拖进一个动态面板到“State1”动态面板中,宽:320,高:800,并更名为:动态面板2(3)将动态面板拖拽到总宽为320.相对高度为800的“State1”动态面板中,并将其名字更改成:动态面板2。

axure8破解安装教程-把汉化补丁放到游戏目录-第9张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

(4)双击鼠标“动态面板2”下的“State1”,随后在动态面板里提升6张图片,铺满动态面板(4)双击鼠标“动态面板2”下的“State1”,随后在动态面板中加上6张图片,添充动态面板。

axure8破解安装教程-把汉化补丁放到游戏目录-第11张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

(5)双击鼠标“翻转实际效果”网页页面,选定“动态面板”(5)双击鼠标“翻转实际效果”网页页面,挑选“动态面板”。

axure8破解安装教程-把汉化补丁放到游戏目录-第13张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

(6)这一步是加上翻转实际效果的一步,在特性下边挑选“拖拽时”特性,在弹出来的测试用例编辑框里,左边加上姿势选中“挪动”,右边配备姿势选定“动态面板2”,下边挪动挑选“竖直拖拽”(6)这一步是加上翻转实际效果的一步。挑选特性下的特性“拖拽时”。在弹出来的实例编辑框中,左边加上姿势挑选“挪动”,右边配备姿势挑选“动态面板2”,下边挪动姿势挑选“竖直拖拽”。

axure8破解安装教程-把汉化补丁放到游戏目录-第15张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

到这一步,完成了实际效果的制做,播放视频实际效果如下所示:这一步,实际效果的制做进行,播放视频实际效果如下所示:

axure8破解安装教程-把汉化补丁放到游戏目录-第17张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

大伙儿是否发觉一个bug?便是在拖拽照片的情况下,能够无限制的拖拽,顶端底端会发生白框,这是为什么呢?是由于不会做界限的限定,下边我们来把界限再加上。你发觉小虫子了没有?也就是拖拽照片时,能够无尽拖拽,顶端和底端会发生白框。为什么呢?由于沒有界限限定,因此大家在下面加上界限。

第三步:设定滚动上界限。

(1)将一个商品详情页拖到“滚动实际效果”网页页面,取名为“商品详情页1”,设定总宽:250,相对高度:24,商品详情页的部位如图所示,应当和图中两端对齐。

axure8破解安装教程-把汉化补丁放到游戏目录-第19张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

(2)选定“动态面板”,挑选特性里的“拖拽完毕时”,在弹出来的测试用例编辑框里,挑选“加上标准”,弹出来的“标准开设”里,先后挑选“元器件范畴.动态面板2.未触碰.元器件范畴.商品详情页1”,点一下明确(2)挑选“动态面板”,在特性中挑选“拖拽完毕时”,在弹出来的实例编辑框中挑选“加上标准”,在弹出来的“标准创建”中先后挑选“部件范畴.动态面板2.没动.部件范畴.商品详情页1”,点一下明确。

axure8破解安装教程-把汉化补丁放到游戏目录-第21张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

(3)挑选加上姿势里的“挪动”,挑选配备姿势里的“动态面板2”,挑选挪动里的“肯定部位”,点一下明确(3)在加上姿势中挑选“挪动”,在配备姿势中挑选“动态面板2”,在运动中挑选“肯定部位”,点一下明确。

axure8破解安装教程-把汉化补丁放到游戏目录-第23张图片axure8破译使用教程-把汉化补丁放进游戏目录-第2张图片

这时,上边界限顺利完成,实际效果如下所示:到此,上界限早已进行,实际效果如下所示:

axure8破解安装教程-把汉化补丁放到游戏目录-第25张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

大伙儿能够见到,在向下拖拽的情况下,当拖至顶端时,发生空缺,电脑鼠标松掉后,全自动有弹回到原点,这就是上边的界限实际效果。能够见到,往下拖的情况下,拖到顶端的情况下,空展现乳白色,松掉电脑鼠标后自弹出回到原点,便是顶端的界限实际效果。

可是,下界限都还没进行,因此再次进行下边的下界限。

第四步:设定滚动下界限。

(1)将商品详情页拖到手机屏底端,设定总宽:250,相对高度:24,取名为“商品详情页2”。

axure8破解安装教程-把汉化补丁放到游戏目录-第27张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

(2)拖拽一个矩形框到“翻转实际效果”页面,设定宽:320,高:800,后边这一点较为关键,将矩形框与利用中照片重合,如下图:(2)拖拽矩形框到“翻转实际效果”页面,设定总宽:320,相对高度:800,哪一个更关键。将矩形框与利用中的照片重合,如下图:

axure8破解安装教程-把汉化补丁放到游戏目录-第29张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

(3)往上挪动矩形框,使矩形框的底端与利用中照片底端重合,随后纪录下y平面坐标:-154,随后删掉该矩形框(加上该矩形框仅仅测算底端y值应用)(3)往上挪动矩形框,使矩形框的底端与利用中照片的底端重合,随后纪录Y平面坐标:-154,随后删掉矩形框(加上矩形框仅用以测算底端Y值)。

axure8破解安装教程-把汉化补丁放到游戏目录-第31张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

(4)点一下“动态面板”,双击鼠标“拖拽完毕时”,加上有关标准,同设定上边滚动界限。留意:“商品详情页2”的挑选,如下图:(4)点一下“动态面板”,双击鼠标“拖拽完毕时”加上有关标准,与设定上滚动界限同样。注:“商品详情页2”的挑选如下所示:

axure8破解安装教程-把汉化补丁放到游戏目录-第33张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

(5)挑选加上姿势里的 “挪动”,配备姿势里挑选“动态面板2”,挪动中挑选“肯定部位”,y值填好刚刚推算出来的:-154(5)加上姿势挑选“挪动”,配备姿势挑选“动态面板2”,挪动挑选“肯定部位”,填好刚刚测算的y值:-154。

axure8破解安装教程-把汉化补丁放到游戏目录-第35张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

那样,下边界限早已进行。那样,下界限就完成了。

看实际效果:

axure8破解安装教程-把汉化补丁放到游戏目录-第37张图片axure8破解安装教程-把汉化补丁放到游戏目录-第2张图片

如何,实际效果是否很帅^_^嗯,实际效果很帅吧。

评论(0条)

刀客源码 游客评论