• 海南全省检察机关第二批员额检察官遴选笔试开考
  • 网综创作需体现时代特性
  • 托里县:电商培训助力“精准”扶贫
  • 新华网VR|小镇相册之我是四川川主寺镇
  • 原创时评:唯愿更多个人事项都能实现“全国通办”
  • 云南勐董边境派出所抓获1名吸毒人员
  • 【中国那些事儿】承载中法源远流长的友谊,这本中国古书在法国“刷屏”
  • 「一帯一路」の「手切族」が買うもの 食品がトップ
  • 杜仲五味茶补肾虚|杜仲|肾虚|腰痛
  • 王一程:集中统一是不是党内民主的内在要求
  • 山东青岛父女"搭档"种葡萄年销售额达200万
  • 自媒体红利期消退开始大浪淘沙 头部效应愈加明显
  • 别把兴奋剂当“聪明药”
  • 全国爱耳日将至 广州这家医院为市民提供义诊服务
  • 越南Vinfast新车预告图发布 10月亮相巴黎车展

    Axure教程:上下翻动效果制作步骤详解

    2019-05-20 14:34:24 产品中国 粉小妞Holly 分享

    抓图网 www.jsntrg.cn 文章主要跟大家介绍,如何利用Axure制作上下翻动效果,一起来看看~

    主要是用Axure做手机APP,内容翻动的效果如何实现:

    让内容在显示区域滚动;

    内容面板没有接触到顶部时,让内容面板移动至顶部;

    内容面板接触到顶部,没有接触到底部时,把内容面板的底部定位到底部元件位置。

    1. 元件布局

    将顶部和底部矩形、动态面板显示区域先放置好,设置相同的宽度,高度自定,无缝衔接在一起。

    以顶部为例,从元件库中选择矩形1拉入画板中,双击矩形编写文字顶部,之后调整顶部的宽和高,如果宽和高固定了,你点击上图步骤4中箭头所指位置的蓝色小点,去除锁定即可修改,最后在右下角页面中双击矩形命名为顶部,同理可得底部。

    显示区域是动态面板同样是从元件库中选中拉入画板中,命名方式有两种,1种在面板选中的情况下,直接在右上角3的区域填写;第2种则是在右下角页面处双击动态面板弹框中命名,如右下角的3区域。

    显示区域除了长宽要设置,还有最左上端的坐标,要承接顶部最坐下端坐标,X轴为0,Y轴为顶部高。

    内容区域也是动态面板,但是,生成方式跟显示面板不同,敲黑板这部分是关键,初学看了其他的教程摸索很久才弄懂。内容区域是在显示面板的state1里面实现的,双击state1进入,然后从元件库拉入新的画板中。设置内容画板宽度同其他元件,高度比显示区域大。图中忘了截图内容区域命名后的,别忘了要命名。

    2. 填充内容面板

    双击内容面板中的state1,填充一些元素,方便查看滚动效果,记得操作完要回到首页。

    3. 添加事件

    1)让内容在显示区域滚动

    2)内容面板没有接触到顶部时,让内容面板移动至顶部;意思是你拉下来页面,让内容面板上部没有接触到顶部时,会自动回到顶部。

    先编辑条件,内容面板未接触顶部时;

    让内容面板移动到顶部,即绝对位置。

    3)内容面板接触到顶部,没有接触到底部时,把内容面板的底部定位到底部元件位置。

    先编辑条件,内容面板接触到顶部,但未接触底部。

    让内容面板移动到底部,移动距离=显示面板高度-内容面板高度(为负数)。

    确认之后预览即可。

    作者:粉小妞Holly。

    产品中国-产品经理门户原创,作者:楠楠,转载请注明出处:http://www.pmtoo.com/article/73420.html

    声明:本站部分资源来源于网络,版权归原作者或者来源机构所有,如作者或来源机构不同意本站转载采用,请通知我们,我们将第一时间删除内容。本站刊载文章出于传递更多信息之目的,所刊文章观点仅代表作者本人观点,并不意味着本站赞同作者观点或证实其描述,其原创性及对文章内容的真实性、完整性、及时性本站亦不作任何保证或承诺,请读者仅作参考。
    编辑:星天
    代孕 | 烟台代孕 | 河北助孕公司 | 上海代怀孕服务 | 贵阳代孕 | 高鹰代孕 | 旺旺宝贝代怀孕网 | 好文网 | 薰衣草潮流网 | 公共云小游戏 | 佛山新闻资讯网 | 深圳代孕 | 伊家亲助孕网 |