这一章节主要讲如何使用函数来制作商品切换

主要有三个部分:翻页功能、商品展示区、商品项

点击“上半角”,商品展示区会向前翻页,同时商品项中会选中对应的商品。

点击“下半角”,商品展示区会向后翻页,同时商品项中会选中对应的商品。

点击“商品项”中的某一张图,商品展示区都会对应显示被选中的那张图。

首先“翻页”功能可以使用动态面板的来设计,动态面板设置4种状态,分别放置对应的商品图。而商品项的商品如何对应商品展示区里面的图片呢?每次点击一个商品,动态面板就要切换到对应的商品的状态里面。可以设置动态面板里面的状态名称与商品项中的商品名称一致。

Axure实战案例3—商品切换功能

(1)商品项的原型设计

Axure实战案例3—商品切换功能

先将一个图片,设置“鼠标移入”、“鼠标单击”、“选中”的时间,如下图所示:

Axure实战案例3—商品切换功能

然后copy出3个,导入相应的图片,该相应的名字。并且将这四个元件设置为元件组,命名为“FoodItems”。

(2)商品展示区

该元件采用动态面板,增加4种状态,注意状态名与商品项中的商品名称保持一致,如下图

Axure实战案例3—商品切换功能

并且增加切换状态时的事件——选中商品项中对应的商品

Axure实战案例3—商品切换功能

(3)翻页功能

Axure实战案例3—商品切换功能

Axure实战案例3—商品切换功能

相关文章: