【Axure9 百例 NO.45】中继器的不同场景下的样式处理

“当用中继器来呈现列表数据时，如何体现不同的样式？”

中继器是用来显示列表数据非常好的元件，因为可以根据需求设计个性化的布局样式，特别适合于电子商务、内容阅读类的列表数据展示。

下面几个例子分别是淘宝搜索结果页、得到讲堂和腾讯视频的列表数据：

虽然这些都在列表里显示了，但是会发现列表中的数据又有微小的差异；例如淘宝搜索结果页面有显示折后价、次日达标识的，得到课堂列表里有显示拼团，有显示限时的，有作者头像右上角没有角标的，腾讯视频缩略图右上角标显示自制，有显示 VIP 和付费的。

使用过中继器元件的知道，一般样式布局都固定的，也就是说都长的一样模样，只是内容不同，如何在中继器列表里显示前面这种相同数据的微小样式差异呢？

我们用一个相对简单的例子来看一下，具体的应用可以在掌握基本方法之后思考一下。

以微信首页的消息列表来举例。

消息列表里一般显示的元素有头像、新消息提醒角标（数字或小红点）、消息时间和消息免打扰图标。

看看下面这个，第一条群里有新消息，右上角有小红点，并且该消息是免打扰的，第二条消息则没有。

01 界面布局

添加一个中继器元件，双击进入编辑状态，用默认的矩形框作为背景，添加一个占位符表示头像，一个红色圆形，三个文本标签和一个免打扰图标，小红点名称 new_msg，文本标签分别为 title，content 和 mute，字段数据布局如下。

中继器的列表数据如下，为便于理解，字段名和元件名称一致：

4 个字段分别表示标题、内容、新消息标志、消息免打扰标志，1 表示有，0 表示无。

中继器的数据显示主要依赖于事件处理，下面看看交互事件的设置。

02 交互处理

文字内容比较好处理，直接使用相应的文本标签显示就可以了，设置后预览的效果如下。

这样显示的样式都统一了，都显示了小红点和消息免打扰图标，显然这不是我们想要看到的，和实际给的中继器数据不一样；我们希望 new_msg=1 时才显示小红点，否则不显示，mute 值也一样。

关键的地方在这里，需要设置一下事件处理的情形，通过条件表达式的方式，判断 new_msg 值是否为 1，如果是 1，则显示小红点，否则隐藏小红点，免打扰标示一样。

· 在每项加载事件右侧，点击“启动情形”添加一个情形；

· 在弹出的窗口中，设置“值”为 new_msg=1 时；

· 设置标题和内容文本标签内容，同时显示 new_msg 小红点。

再添加一个 ELSE 情形，隐藏小红点，中继器实时预览效果如下，可以看到小红点已正常显示或隐藏，第 2、3 条数据的 new_msg=0，所以隐藏了。

上面到这里算是讲了基本的原理。

细心的同学可能发现了，上面的情形只判断了 new_msg 的值，还有消息免打扰的 mute 呢，咋添加情形？要罗列所有可能的组合吗？

· 有新消息，有免打扰

· 有新消息，无免打扰

· 无新消息，有免打扰

· 无新消息，无免打扰

当然，这样去添加不同的情形也可以，只是比较繁琐。如果再来个群头像角标显示的是数字呢？场景就越来越多了。

提这样的问题，是因为有更好的解决方式。

下个案例来说一下多个条件判断的更优雅的处理方式，如果你知道怎么处理，或者觉得比较好的方法，也可以分享一下。

03 小结

如果要以一句话总结，就是要在中继器里显示不同的样式，通过添加不同情形的方式来判断关键字段标识，显示或隐藏相应的元件。

通过这种方式可以实现不同情况下的样式，便于开发、测试人员更直观的理解，这也是带有交互效果的原型的好处之一。

关于作者

——

公众号「axurestore」，产品交互原型设计/Axure

往期回顾

【Axure9百例】44.百度网盘拖动按钮样式

【Axure9百例】43.百度网盘验证

【Axure9百例】42.支付宝首页样式

【Axure9百例】41.调色板

【Axure9百例】40.数据可视化

————————————————

版权声明：本文为 CSDN 博主「Axure 原型设计工场」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/yotoodesign/article/details/115073417