使用元件切換器實作一個标簽導航
效果展示
前置準備
- 背景素材
- 話題圖示素材
具體步驟
- 制作背景
- 制作話題導航
- 制作話題導航結果清單
- 設定元件切換器關聯内容
- 建立切換元件行為觸發器
- 建立點選行為觸發器
步驟分解
- 制作背景
- 将背景素材添加到 根容器
- 拖拽 元件切換器 到 背景素材上
- 選中 元件切換器
- 點選 檢查面闆 的 樣式
- 調整 元件切換器 樣式
- 制作話題導航
- 拖拽 容器 到 編輯區
- 選中 容器
- 點選 檢查面闆 中 的 樣式
- 配置 容器 的 樣式
- 拖拽 标簽文本 到 容器 中
- 選中 标簽文本
- 點選 檢查面闆 中 的 樣式
- 調整 标簽文本 的 樣式
- 将話題圖示素材添加到 标簽文本 中
- 制作話題導航結果清單
- 拖拽 循環容器 到 布局到 容器
- 選中 循環容器
- 點選 檢查面闆 中的 樣式
- 配置 循環容器 的 樣式
- 拖拽 圖檔元件 到 循環清單項
- 選中 圖檔元件
- 調整 圖檔元件 的 樣式
- 拖拽 标簽文本 到 循環清單項
- 選中 标簽文本
- 調整 标簽文本 的 樣式
- 滑鼠右鍵 複制 一個 容器
- 為新複制的容器，更換圖檔和文本
- 設定元件切換器關聯内容
- 選中 元件切換器
- 點選 檢查面闆 中的 資料綁定與設定
- 點選加号，設定關聯内容
- 建立切換元件行為觸發器
- 選中 元件切換器
- 點選 檢查面闆 中的 觸發器
- 建立如下 觸發器
- 建立點選行為觸發器
- 選中 标簽文本
- 點選 檢查面闆 中的 觸發器
- 建立觸發器