您好、欢迎来到现金彩票网!
当前位置:秒速牛牛计划 > 添加删除按钮 >

Axure教程|购物车商品增减删除练习

发布时间:2019-05-20 16:52 来源:未知 编辑:admin

  看了前面几位大神发的中继器的九宫格啥的,我只能说:请收下我的膝盖!中继器我也就初级水平,就不献丑了,还是给大家分享点我这水平能够做到的东西,希望大家表喷我,多给我鼓励鼓励~撒浪嘿呦~

  UP主要给大家分享的是某宝,你知道我说的是谁的,别装(认真脸),就是大淘宝咯,它的购物车页面的单个信息的加减和删除。主要是练习下动态面板和认识下局部变量的应用。废话不多说了,你们肯定急着要干货,那就开始吧!Lets begin,plz follow your heart(这是什么鬼????)Pay attention to me(捂脸~~~~)

  准备工作我就一下子先把需要的元素都放上去,你们先不用管它们干嘛的,后面一一介绍,跟着我的文字动动你的鼠标,快快把各个元素都拉进工作区吧

  商品信息1(先拖出一个动态面板1,商品模块第一层,然后放上店铺,商品图,领券和编辑按钮,还有个完成按钮,然后再在此面板拖出个动态面板2,充当点击编辑按钮时的界面切换,在面板2里添加2个状态state,一个状态展示商品信息例如标题,尺码,价格,另一个状态展示加减和删除商品,把各种按钮拖进去,参看截图来)

  再来个同样的商品,直接copy上面的即可,为商品信息2,你就当成不一样的好了

  开始命名,动态面板1叫商品1,动态面板2叫编辑切换,面板2的状态1叫信息,状态2叫编辑;文字按钮命名,领券叫领券,编辑叫编辑按钮,完成叫完成按钮,加减号分别叫加和减,中间的数值叫计数,商品信息的个数叫计数和

  淘宝的购物车操作比较多,总的来说就是商品的编辑,分解下编辑都做了啥,我要做啥。

  淘宝购物车可以各种其他链接跳转(这个这里不做,I dont care),商品的重新选择(我懒,不做),商品数量的编辑(本分享重点),商品的删除(批量和单个,我只做单个删除介绍)。

  我要介绍的是商品信息和商品编辑的切换,由“编辑”按钮触发,“完成”按钮返回,编辑状态下可进行加减商品的数量,完成后回到信息界面,商品数量对应变化;叫编辑状态下删除商品,自动返回商品信息界面(中间还有个二次确认提示,我跳过了),当前商品消失,下方商品上移。

  一步一步来,心急吃不了热豆腐的,表着急,UP主我比你还着急,好期待你们的点赞哦~~~~~~~

  第一步:点击编辑按钮,领券按钮消失,完成按钮出现(编辑位置),编辑消失,界面变商品数量等修改样子

  给“编辑”按钮添加用例,鼠标点击时,隐藏“领券“,”编辑”按钮,显示“完成”按钮,动态面板切换到“编辑”状态。“完成”按钮和“编辑”按钮叠加放在一个位置,别忘了,“完成”按钮设成隐藏,选中右键即可看见选项。

  点击➕实现数字加1,点击➖实现数字减1,当心,这里要注意,数字为1时,点击➖号数字就不能够再减了。

  加的动作添加完成,开始添加减的动作,动作与加相反,用例实质一样,只需将加1修改为减1。对咯,有一点特别指出,那就是减要添加用例条件,即数字1时才能操作,否则点击无效。同样的用例我就不截图展示了,就展示下添加用例条件的啦~so lazy,没救了。。。

  哟哟哟,加减动作添完了,赶紧来预览,wow,是不是成就感来了,已经完成一半了,坚持坚持,曙光在望。

  给“删除”按钮添加用例,鼠标点击时,隐藏“商品1“面板,“商品2”面板上移到1的位置。我添加了一点点的过渡的效果,便于观察哦~

  这一步和就是第一步和第二步的结合体,点击“完成”与“编辑”用例正好动作相反,隐藏的变显示,显示的变隐藏,商品计数与编辑时相同。原理相同,简单截图凑活看看吧~

  分享到此结束,你有没有做出来呢?仔细看清楚哦,相信你肯定能做出来的~~~~欢迎大家一起交流。

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

  LVARE1是哪里来的啊?是自己起的名字吗?还是固有的含义呢?小白一个,问题比较白痴请见谅。嘻嘻

  感谢,楼主写的好详细,已收藏,照着做了一遍,其它都ok,为什么计数的时候不对,不能计算出值,还望指导一下下

  你看下你自己做的局部变量的和我的原型文件对一下,看看是不是那里设置有问题。

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

http://soportecliente.com/tianjiashanchuanniu/60.html
锟斤拷锟斤拷锟斤拷QQ微锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷微锟斤拷
关于我们|联系我们|版权声明|网站地图|
Copyright © 2002-2019 现金彩票 版权所有