如何在小程式裡一鍵清除未讀訊息?

使用觸發器的隱藏，實現列表訊息的清除。

效果展示

前置準備

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