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

188 阅读1分钟

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

效果展示

前置准备

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. 配置 触发器