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

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

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

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

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

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

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

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

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

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

01 界面布局

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

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

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

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

02 交互处理

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

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