cmd組件制作登錄/注冊/個人中心頁面模板

在Vue初學者使用uni-app時，制作登錄、注冊和個人中心頁面模板是一個非常友好的方式。這篇文章將介紹如何使用cmd組件來實現這些功能，而且代碼操作注釋明確，方便理解和使用。

所需組件

以下是需要用到的組件及其對應的代碼塊：

• 動畫組件名：cmd-transition 代碼塊： cmdTransition
• 頭像組件名：cmd-avatar 代碼塊： cmdAvatar
• 底部導航欄組件名：cmd-bottom-nav 代碼塊： cmdBottomNav
• 列表單元組件名：cmd-cell-item 代碼塊： cmdCellItem
• icon圖標組件名：cmd-icon 代碼塊： cmdIcon
• 輸入框組件名：cmd-input 代碼塊： cmdInput
• 導航欄組件名：cmd-nav-bar 代碼塊： cmdNavBar
• 導航欄內容頁組件名：cmd-page-body 代碼塊： cmdPageBody

全局樣式設置

為了讓自定義導航欄正常工作，我們需要進行一些全局樣式的設置。在globalStyle中做出以下更改：

"globalStyle": {
  "navigationStyle": "custom",
  "app-plus": {
      "scrollIndicator": "none",
      "bounce": "none"
  }
}

通過上述設置，我們可以隱藏頂部導航條、滾動條和原生回彈陰影，以便使用自定義的導航欄。

使用全局樣式

如果你在使用cmd組件時遇到了大小異常的情況，可以在組件內加上view標簽通用樣式：

/* 全局樣式 */
@import url("./common/uni/uni.css");

/* 通用 */
view {
    font-size: 28upx;
    line-height: 1.8;
}

以上代碼將為所有頁面的視圖元素提供統一的字體大小和行高。

通過以上步驟，你已經準備好開始制作登錄、注冊和個人中心頁面模板了。使用cmd組件將使整個過程更加簡單和友好，特別適合Vue初學者使用。祝你編碼愉快！