移動端用戶中心的待辦事項查看標記頁設計

在完成列表頁後，我們來實現「查看編輯」頁面。在一般情況下，用戶進入編輯頁面並完成相關數據後提交，頁面會有一定的提示與反饋，這是基於安全性和用戶體檢的考慮。常見的交互效果舉例如下：

1、數據格式驗證。如驗證提交的內容不能為空等。

2、提交數據驗證。數據提交成功或失敗的情形下，給予用戶的反饋提示。

3、重要操作提實驗證。例如，刪除某一條數據的時候，彈出確認框提示是否確認刪除，以防止用戶誤刪除。

首先新建detail.html頁面，在頁面上引入基本的結構與代碼。

根據用戶數據提交的需求，在頁面上增加一個表單，其中至少要包含：待辦事項標題、待辦事項內容和提交按鈕。這一部分的核心代碼如下：

保存代碼並在遊覽器裡面執行，效果如圖所示。

用戶輸入標題和內容後，單擊「保存記錄」按鈕後可以提示保存數據成功並且跳轉到list.html列表頁。這裡頁面提示使用WeUI提供的toast組件。首先，在頁面上增加組件，代碼如下：

在以上代碼中，為toast外層容器增加id為toast，並且整體狀態為隱藏：

為「保存記錄」提交按鈕增加id為doSave，代碼如下：

保存記錄

為實現單擊「保存記錄」按鈕實現提示成功效果，增加JavaScript的代碼如下：

保存以上代碼，在遊覽器里運行。當用戶單擊「保存記錄」按鈕後，頁面上出現toast提示框，1秒後跳轉到list.html頁面，如圖所示。

注意：JavaScript中的setTimeout函數使用毫秒（ms）為單位，1000ms=1s。

為了讓用戶可以更改日程狀態，頁面上需要增加一個單選輸入框（radio）來提供狀態選擇。使用WeUI提供的單選樣式代碼如下：

增加後的頁面效果如圖所示。

最後給頁面增加一個「取消保存」按鈕，當用戶單擊此按鈕時彈出一個確認框，提示用戶是否離開此頁面，當用戶單擊「確認」按鈕後，頁面重定向到list.html。其中使用WeUI增加的按鈕和Dialog代碼如下：

其中，Dialog增加id屬性值為doalog1，默認為隱藏狀態。「取消保存」按鈕增加id屬性值為cancelSave。增加JavaScript代碼如下所示：

最終完成效果如圖所示。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！