• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure设计:制作iOS列表左滑菜单效果

Axure设计:制作iOS列表左滑菜单效果

作者: @互联科技 字体:[增加 减小] 来源:互联网 时间:2017-06-13

本文主要包含axure ios元件库,axure部件库ios,axure ios组件库,axure ios元件库下载,axure8.0 ios元件库等相关知识, @互联科技 希望在学习及工作中可以帮助到您

该效果是模仿iOS微信界面中,左滑列表时显示菜单项的效果,使用的都是Axure中常用的组件,原理是通过控制动态面板的坐标来移动面板并显示菜单。本文仅适用于具有一定Axure使用经验的用户阅读。

Axure版本:8.0

制作步骤为:

添加中继器–>添加动态面板–>添加选项菜单–>绑定事件

1.添加中继器

1)在页面中添加中继器控件,并设置中继器绑定数据,添加后默认效果如下图,如果不熟悉中继器的使用方法,请参考我的其他文章《Repeater(中继器)控件的用法》;

此时,预览效果如下:

2.添加动态面板

1)打开中继器编辑界面,全选所有的组件,点击右键将其转换为动态面板,并命名为panelList,这样转换的目的是动态面板可以响应左滑的动作,如下图所示:

3.添加选项菜单

下面添加选项菜单,以下仅以添加一个删除菜单为例进行说明。

1)在中继器编辑窗口中,添加一个矩形组件并设置好样式,效果如下:

2)右键点击该矩形组件并将其转换为一个动态面板,命名为panelOption,并将面板设置为隐藏,如下:

4.添加事件

该步骤是最核心的环节,整体左滑效果都是在这个环节中实现的。

1)在中继器编辑窗口中,为panelList添加左滑事件,滑动时让panelList的x坐标相对于当前位置向左移动64px,效果如下:

注意:x坐标向左移动的距离需要与panelOption的宽度相等。

2)此时预览原型图,左滑列表已经可以看到动态面板左滑的效果,如下:

3)继续为panelList面板的左滑事件添加动作,动画显示panelOption,如下:

4)再次预览,已经出现期望的效果,如下图:

5)至此,左滑显示菜单的功能以实现,但菜单无法隐藏,下面还需要添加右滑隐藏菜单的功能;

6)为panelList添加右滑事件,当向右滑动结束时panelList的x坐标相对于当前位置向右移动64px,效果如下:

注意:此时的当前位置是panelList已经左滑过去的位置,即位置(-64,0)。

7)再次预览,右滑就可以隐藏菜单了。

5.进阶内容

细心的读者可能会发现,按照上述方法制作的滑动效果是有瑕疵的,即如果连续左滑或者连续右滑,panelList会一直向左或向右移动,这显然跟实际的效果是有偏差的。以下内容将介绍如何避免这种情况发生,当然如果不追求完美的小伙伴可以不用考虑这个章节的内容哦。

1)只要在面板滑动时添加一个条件限制左滑或右滑就可以了,方法如下:

即:

在panelList的“向左滑动结束时”添加条件,设置只有当面板的x坐标等于0时才可以向左滑动;

同理,在panelList的“向右滑动结束时”添加条件,设置只有当面板的x坐标不等于0时才可以向右滑动。

2)上述条件设置完成后,再次预览,发现就只能向左或向右滑动一次啦。

您可能想查找下面的文章:

  • Axure设计:制作iOS列表左滑菜单效果

相关文章

  • 2017-06-13Axure教程:可使用的计算器demo制作(上)
  • 2017-06-14Axure教程 | 图片放大器
  • 2017-06-13矩形框:深度理解和应用元件样式(二)
  • 2017-06-13Axure实现多级联动下拉框
  • 2017-06-14简单6步用Axure绘制相机图标(附源文件)
  • 2017-06-14建立自己的元件库(二)——验证码
  • 2017-06-13Axure教程:原型实战之模拟拼图效果(变量、动态面板、参数…全面实战应用)
  • 2017-06-13Axure8.0实例:简单实用的验证码
  • 2017-06-14Axure基础教程—文本框用法
  • 2017-06-13Axure RP8 动态面板之轮播图设置

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 高手在民间 | 手把手教你用Axure制作连连看游戏(附游戏地址)
    • Axure教程 | 商品列表页筛选排序练习
    • 自定义微信元件库:Axure基本元件的应用(上)
    • Axure教程:如何制作一个不区分大小写的验证码原型?
    • 五分钟教你快速上手Axure交互设计
    • Axure教程:中继器实现列表到详情页的数据传递
    • Axure教程:原型实战之模拟拼图效果(变量、动态面板、参数…全面实战应用)
    • Axure教程 | 漂亮的不像实力派的锤子时钟
    • 用Axure模拟一个数字抽奖的小游戏
    • Axure实例:Axure Pro 8制作产品需求文档

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有