> 文章列表 > 如何在小程序里一键清除未读消息?

如何在小程序里一键清除未读消息?

使用触发器的隐藏,实现列表消息的清除。

效果展示

如何在小程序里一键清除未读消息?

前置准备

1. 消息列表素材

如何在小程序里一键清除未读消息?

具体步骤(6)

1. 添加消息列表背景

2.制作标题

3.制作标记已读

4.制作未读消息气泡

5.创建隐藏触发器

6.创建标记已读触发器

步骤分解

1.添加消息列表背景

1.1. 拖拽 图片组件根容器

1.2. 选中 图片组件

1.3. 点击 检查面板 中的 数据绑定与设置

1.4. 上传图片素材

1.5. 点击 检查面板 中的 样式

1.6. 调整 图片组件 样式

如何在小程序里一键清除未读消息?

2.制作标题

2.1. 拖拽 标签文本根容器

2.2. 选中 标签文本

2.3. 点击 检查面板 中的 样式

2.4. 配置 标签文本 样式

如何在小程序里一键清除未读消息?

3.制作标记已读

3.1. 拖拽 标签文本 到 根容器

3.2. 选中 标签文本

3.3. 点击 检查面板 中的 样式

3.4. 配置 标签文本 样式

如何在小程序里一键清除未读消息?

3.5. 拖拽 标签组件根容器

3.6. 点击 检查面板 中的 数据绑定与设置

3.7. 选择 图标

如何在小程序里一键清除未读消息?

3.8. 选中 图标

3.9. 点击 检查面板 中的 样式

3.10. 配置图标 样式

如何在小程序里一键清除未读消息?

4.制作未读消息气泡

4.1. 拖拽 标签文本消息列表素材

4.2. 选中 标签文本

4.3. 点击 检查面板 中的 样式

4.4. 调整 标签文本样式

如何在小程序里一键清除未读消息?

5.创建隐藏触发器

5.1. 选中未读消息气泡

5.2. 点击 检查面板 中的 触发器

5.3. 配置 触发器

5.4. 其余未读消息气泡操作逻辑相同

如何在小程序里一键清除未读消息?

6.创建标记已读触发器

5.1. 选中标记已读 标签文本

5.2. 点击 检查面板 中的 触发器

5.3. 配置 触发器

如何在小程序里一键清除未读消息?

这样就可以一键清除未读消息了。

本文转载自知乎:如何在小程序里一键清除未读消息? - TOWIFY的文章 - 知乎
   https://zhuanlan.zhihu.com/p/585268643