Axure系列:摩拜单车-----左侧抽屉菜单

作者: 黎木目 | 来源:发表于2017-08-25 16:10 被阅读41次

这次我们来做一下摩拜左侧抽屉菜单。

目标:

1、点击左上角人像按钮,滑出菜单

2、左划隐藏菜单

3、点击菜单列表有按下效果

步骤

1、拖进一个动态面板,设置尺寸为 (320,568),样式设置为

2、参照摩拜放入头部

3、关键的步骤来啦,用中继器来实现菜单列表。

3.1、首先拖入一个中继器

3.2、双击中继器,参照列表放入图片、文本、矩形,并设置元件名称。给cell矩形设置选中状态颜色为#C9C9C9


3.3、选中中继器,对中继器中的表格表头进行编辑

编辑表头为icon和label,图片的输入是:复制图片,选中单元格直接粘贴即可

3.4、对中继器添加载入时事件

使载入时,让元件自动从中继器中获取文字来展示 和文本的方式类似

到这,列表就出来了,效果如图:

3.5、添加菜单的按下效果,双击中继器,选择所有元件,右键转换为动态面板,给动态面板添加事件

4、首页左上角添加个人icon,添加事件

5、在“左侧抽屉菜单中加个透明的元件,添加事件

再补充一些小细节就完成了。

福利:

原型预览地址:http://pko7xu.axshare.com

源文件地址:http://pan.baidu.com/s/1pLjvUEv 密码:rw73

相关文章

  • Axure系列:摩拜单车-----左侧抽屉菜单

    这次我们来做一下摩拜左侧抽屉菜单。 目标: 1、点击左上角人像按钮,滑出菜单 2、左划隐藏菜单 3、点击菜单列表有...

  • Axure系列:摩拜单车-----登录

    共享单车盛行,相信很多人手机中都装有摩拜单车App吧,应该都很熟悉吧。从这篇文章开始教大家做个摩拜单车的原...

  • Axure系列:摩拜单车-----拖动地图

    大家好,这篇主要讲述,用动态面板实现拖动地图效果 步骤 1、到网上找到地图,截一张大的地图,粘贴到Axure中 2...

  • Axure系列:摩拜单车-----扫码开锁

    上篇文章,完成了摩拜登录的模块,登录完了,干啥呢?当然是扫码用车呀。 这篇文章给大家讲讲扫码的效果怎么做。...

  • Axure抽屉菜单

    Axure抽屉菜单制作 1.拖入新的矩形框,添加此一级菜单的名字,并在文字后的位置放置一个单角符。 2.增加一个动...

  • 摩拜单车产品分析

    背景介绍 最近已经被摩拜单车刷屏了,看一下摩拜单车的定义。 摩拜单车,英文名mobike,是由北京摩拜科技有限公司...

  • 无摩拜app客户端客服电话

    关于摩拜单车摩拜单车客服电话 a155155/ 摩拜单车创建、了全球首个智能共享单车模式,其自主研发的专利智能锁集...

  • 低成本扩张的祸根 ofo还要多久收拾残局?

    经过一系列的激烈竞争,很多人认为共享单车已经进入了摩拜vsofo的双寡头时代。单从单车产品上说,ofo和摩拜的差别...

  • 共享单车魔咒,没有资本就没有生存

    摩拜单车已全面接入美团APP,将成为美团LBS平台单车事业部,未来摩拜单车将更名为美团单车,这标志着摩拜单车独立发...

  • 今天我骑摩拜单车上班

    今天我骑摩拜单车上班。 问: 摩拜单车是什么? 答:摩拜单车是一种共享型自行车。 摩拜统一定制的小橙车可以停在路边...

网友评论

    本文标题:Axure系列:摩拜单车-----左侧抽屉菜单

    本文链接:https://www.haomeiwen.com/subject/ksiudxtx.html