Axure外卖订单平台教程:用中继器做商品列表购物车

0 2021-08-25 11:46 内容校对:海绵宝宝手里的锅铲
收藏(0) 共有 121 人学习了本教程

《Axure外卖订单平台教程:用中继器做商品列表购物车》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强交互产品,文本,购物车等多维度案例或实操来进行更多的学习;此教程是由一袋米GL在2021-08-25发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。

当我们在外卖平台选购商品时,如果有购物车功能则会方便不少。不仅可以让用户有多种选择,还能起到暂时收藏,方便下次购买的作用。今天,下面就教大家如何Axure中继器做外卖订单平台中商品列表的购物车?一起来看一看吧:

原型演示地址:https://cty930.axshare.com/#g=1

Axure外卖订单平台教程:用中继器做商品列表购物车

开始教学了~~~~

一、材料准备

中继器×1,图片×1,加号按钮×1,减号按钮×1,结算按钮×1,购物车图标×1,文本×7,文本分别为商品名称、商品介绍、销售量、价格、数量、合计金额、配送费。

二、原件摆放

中继器内原件摆放:将商品名称、商品介绍、销售量、价格、数量、图片、加号按钮和减号按钮按下图所示摆放。

Axure外卖订单平台教程:用中继器做商品列表购物车

中继器外原件摆放:将购物车图标、合计金额、配送费、结算按钮如下图摆放,并组合转为动态面板,固定于底部,配送费改为根据需求设定。

Axure外卖订单平台教程:用中继器做商品列表购物车

三、中继器表格设置

我们需要添加6列:

  1. picture:代表商品图片,我们右键或者复制粘贴图片到表格即可;
  2. name:商品名称;
  3. jieshao:商品介绍;
  4. xiaoshouliang:商品的销售量;
  5. jiage:商品价格;
  6. shuliang:用户加入购物车的数量,因为一开是为0,所以全部填写0。

Axure外卖订单平台教程:用中继器做商品列表购物车

填写表格内数据即可,小提示,可以在excel里面填写好再复制粘贴,能够大大提高效率哦。

四、交互设计

设置中继器内文本:在中继器每项加载时,把中继器表格内对应的数据,设置到对应的文本里,这里用设置文本的事件,让数量文本=[[Item.shuliang]];价格文本=¥[[Item.jiage]],销售量文本=月售[[Item.xiaoshouliang]],商品介绍文本=[[Item.jieshao]],商品名称文本=[[Item.name]]。

Axure外卖订单平台教程:用中继器做商品列表购物车

设置中继器内图片:设置好文本后,我们就要设置商品图片,这里用设置图片的交互来完成,设置图片的值为[[Item.picture]]。

Axure外卖订单平台教程:用中继器做商品列表购物车

设置减号按钮是否显示:其实这个逻辑很容易理解,当数量为0时,商品不能在减少,我们就隐藏减号按钮,当商品数量不为0的时候就显示,因为默认是显示的,所以我们只需要设置当数量为0时,隐藏减号按钮即可。

条件是数量文本=0时:

Axure外卖订单平台教程:用中继器做商品列表购物车

设置加/减号按钮点击时事件:如果点击加号的时候,我们设置数量文本在原来的基础上+1;点击减号按钮时,设置数量文本在原来的基础上-1。

这里有的同学问这样会不会减到负数,答案是不会的,因为减到数量为0时,减号按钮就被隐藏了,具体请看上一步。

这里我们需要用更新行来更新表格的数据,有同学可能会问为什么不改文本,因为如果改文本下面就计算不了合计金额了,但是如果改表格数据,就能计算。

这里我们更新当前行,如果是加号按钮,更新行为[[Item.shuliang+1]];减号按钮则为[[Item.shuliang-1]]。

Axure外卖订单平台教程:用中继器做商品列表购物车

设置合计金额时间:在中继器每项加载时,我们需要判断,如果是第一行的话我们先要设置合计金额为0元,然后每一行加载的时候,我们计算合计金额的值为合计金额原来的值(target.text)+该行的价格(item.jiage)*数量(item.shuliang),这样就可以计算出总额的值。

Axure外卖订单平台教程:用中继器做商品列表购物车

以上就是Axure外卖订单平台教程:用中继器做商品列表购物车的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。

0

赠人玫瑰,手有余香

本内容由一袋米GL原创发布,小编仅对内容版式进行调整,如有侵犯你的权利,请联系我们。

如果你觉得好,你可以将本课程转发给你的朋友!

参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

用户给我们的评价
北极熊素材库累计为超过1000+家中小企业提供服务
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议

请输入用户名,6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中,请在三天内修复密码。

3秒后,将关闭此窗口 立即关闭

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材,助力您的工作和学习

立即升级VIP会员