Axure8.0|移动端上下滑动不出屏

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

制作高保真原型的时候,常常需要将屏幕上下滑动,今天和大家分享的是通过多动态面板套用实现上下滑动不会超出屏幕框架。

qadsaf

一、元件准备

top(头部)、beijing(背景)、bottom(底部)、cours(课程)、drag(拖动)。

注:top和bottom保持在顶层,beijing为矩形,此处应去掉边框,cours和drag是动态面板,所有元件的宽度相同

二、排版

beijing紧挨top底边且对齐放置,bottom紧挨beijing底部放置,接着course以头部对齐的方式覆盖到beijing上,最后drag以头部对齐的方式覆盖到course上。

注:如果bottom之前忘记点击顶层,是会被覆盖住,这个时候要将其放置顶层。

三、添加用例

1 drag移动时,移动course动态面板,默认跟随。

2 drag拖动时,自身垂直拖动。

3 drag拖动时,编辑条件 如果drag的顶部大于top的底部,则drag移动到绝对位置(达到)  x:0,  y:[[t.bottom]]。

4 drag拖动时,编辑条件 如果drag的底部小于bottom的顶部,则drag移动到绝对位置(达到)  x:0,  y:[[b.top-d.height)]]。

5将排版好的原型再次转换成动态面板,嵌到高保真手机壳上,并且将新的动态面板的底边向上拉动,直到与bottom的底边重合。

四、效果

具体效果请到如下网址查看:http://67r9k4.axshare.com/#g=1&p=index

 

作者:乐悠悠   QQ:714226583,目前在找工作

本文由 @乐悠悠 原创发布于人人都是产品经理。未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。
3人打赏

评论( 13

登录后参与评论
  1. 这个用8.0的添加顶部边界,底部边界 :twisted: , 几秒就弄好了。。。。

    回复
  2. 亲,能加你qq吗?有点问题,帮忙看下 http://x10w6c.axshare.com

    回复
  3. 为什么我这里没有跟随呢

    回复
  4. 8.0以后添加边界比这个简单多了吧 :oops:

    回复
    1. 回复

      是的,但是研究了一下,没做出来 :!:

  5. 每天学个小技巧,一个月后就变成Axure大牛了。 :mrgreen:

    回复
    1. 回复

      加油 : ;-)

  6. 7.0 可以加2个线转化为动态面板。 用条件中的原件范围接触的方式进行判断
    8.0 在设置移动时,下面有个添加边界,设置移动范围

    都要简单多

    回复
    1. 回复

      我试一下看看 谢谢。

    2. 回复

      @周关利 能加一下你的qq吗?

    3. 回复

      125078878

    4. 回复

      1、元素说明
      外层 一个固定大小的动态面板,高度640;固定屏幕
      里面 一个自动调整为内容尺寸的面板,高度1000,长页面
      2、期望动作
      在外层固定面板中,可以手动滑动长页面。 并且长页面在一个固定的一个范围内滑动。 (长页面不出屏)
      3、操作
      在外层动态面板的状态1中,创建长页面的动态面板。
      在状态1中,对长页面动态面板设置“拖动时”事件
      添加动作“移动-长页面面板”设置垂直移动
      添加移动边界
      顶部 大于等于 负 (长页面高度 – 外层固定页面高度)
      底部 小于等于 长页面高度
      顶部 大于等于 负360
      底部 小于等于 1000
      就可以了

    5. 回复

      好的,学会了,谢谢。

加载中