编辑引线:中继器的基本功能是动态添加或删除行或列。中继器将用于许多场景中的处理。例如，在显示表格、布局等数据时，不同的场景会得到不同的处理；本文作者分享了不同场景下直放站的风格处理，大家一起来看看。

"当使用中继器呈现列表数据时，如何体现不同的风格？"

Repeater是一个非常好的显示列表数据的组件，因为它可以根据需要设计个性化的布局样式，特别适合显示电子商务和内容阅读的列表数据。

以下例子是淘宝搜索结果页面，讲堂列表数据，腾讯视频:

虽然列表中显示了这些，但你会发现列表中的数据略有不同；比如淘宝搜索结果页面显示打折价格和第二天到达的标志，教室列表显示一个群，显示一个限定时间，作者头像右上角不显示角标，腾讯视频缩略图右上角显示自制，显示VIP和付费。

用过直放站组件的人都知道，总的风格布局是固定的，也就是说看起来都一样，但是内容不一样。复读机列表中相同数据的细微风格差异如何显示？

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

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

消息列表中通常显示的元素包括头像、新消息提醒角(数字或小红点)、消息时间和消息请勿打扰图标。

看下面这个。第一组有新消息，右上角小红点，消息不被打扰，第二组没有消息。

01界面布局

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

中继器列表数据如下。为了便于理解，字段名称与组件名称一致:

这四个字段分别代表标题、内容、新消息标志和消息请勿打扰标志。1表示是，0表示不是。

复读机的数据显示主要依靠事件处理。我们来看看互动事件的设置。

02交互式处理

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

这样显示的样式都是统一的，都是显示小红点和留言请勿打扰图标。显然这不是我们想看到的，和实际中继器数据不同；我们希望new_msg=1时显示小红点，否则不显示，静音值也不显示。

这里的重点是设置事件处理情况，通过条件表达式判断new_msg值是否为1。如果是1，会显示小红点；否则，小红点将被隐藏，请勿打扰标志将保持不变。

在每项加载事件右侧，点击“启动情形”添加一个情形；在弹出的窗口中，设置“值”为new_msg=1时；设置标题和内容文本标签内容，同时显示new_msg小红点。

再加一个ELSE的情况来隐藏小红点。复读机的实时预览效果如下。可以看到小红点已经正常显示或隐藏，第2、3个数据的new_msg=0，所以是隐藏的。

以上是这里的基本原则。

细心的同学可能发现，以上情况只判断new_msg的值，有一个静音不中断消息。如何添加一种情况？是否要列出所有可能的组合？

有新消息，有免打扰有新消息，无免打扰无新消息，有免打扰无新消息，无免打扰

当然，这样添加不同的情况是可以的，但是比较繁琐。如果有另一个群头像呢？角标显示数字？场景越来越多。

提出这个问题是因为有更好的解决办法。

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

03摘要

一句话总结，需要在复读机中显示不同的样式，通过添加不同的情况来判断关键字段标识，并显示或隐藏相应的元素。

这样就可以实现不同情况下的风格，方便开发人员和测试人员更直观的理解。这也是原型具有交互效果的好处之一。