Uni-app은 다중 터미널 개발을 위한 크로스 플랫폼 프레임워크로, APP 및 H5는 물론 WeChat, Alipay, Baidu, Toutiao 및 기타 소규모 프로그램 플랫폼을 지원합니다. Uni-app을 개발하는 과정에서 App의 UI 인터페이스를 디자인하는 것은 매우 중요하며, 타이틀바는 인터페이스 디자인에서 빼놓을 수 없는 부분입니다. 이번 글에서는 Uni-app에서 타이틀바를 설정하는 방법과 기법에 대해 자세히 소개하겠습니다.
1. 기본 제목 표시줄
새 Uni-app 프로젝트를 생성하면 기본 페이지에 이미 제목 표시줄이 포함되어 있는 것을 볼 수 있습니다. 제목 표시줄에는 일반적으로 페이지 제목과 뒤로 버튼이 표시됩니다. 제목 표시줄 스타일은 플랫폼마다 다를 수 있으며 해당 플랫폼에서만 적용된다는 점에 유의하세요.
2. 기본 제목 표시줄 수정
기본 제목 표시줄의 스타일이 요구 사항을 충족하지 않는 경우 스타일 파일을 수정하여 제목 표시줄을 변경하는 효과를 얻을 수 있습니다. 전체 uni-app 프로젝트에서 App.vue 파일을 열고 글로벌 네비게이션 바의 스타일 설정 섹션(보통 하단)을 찾아 제목 표시줄 배경, 텍스트 색상, 아이콘 수정 등 필요한 스타일을 추가합니다. 등등 수정이 필요합니다.
3. 제목 표시줄 사용자 정의
기본 제목 표시줄의 스타일을 수정하는 것 외에도 필요에 따라 새로운 제목 표시줄을 사용자 정의할 수도 있습니다. 구체적인 방법은 다음과 같습니다.
위 단계를 통해 필요에 맞게 제목 표시줄을 쉽게 사용자 정의할 수 있습니다.
4. 제목 표시줄 높이 설정
깔끔하고 아름다운 인터페이스를 위해서는 제목 표시줄의 높이를 적절하게 설정해야 합니다. Uni-app에서는 스타일 파일을 수정하여 이를 달성할 수 있습니다.
다양한 플랫폼의 제목 표시줄 높이는 다음과 같습니다:
/* 微信小程序 */
.uni-page-head {
height: 48px;
}
/* 支付宝小程序 */
.ap-wrapper .a-page-header {
height: 56px;
}
/* 头条小程序 */
.bytedance-page-head,
.bytedance-page-head-fixed {
height: 56px;
}
/* 百度小程序 */
.swan-navigation-bar {
height: 40px !important;
}
/* APP */
.u-header {
height: 44px;
}
/* H5 */
header {
height: 56px;
}제목 표시줄에는 일반적으로 조정해야 할 일부 텍스트가 있습니다. 페이지 제목과 같이 중앙에 배치됩니다. 기본적으로 Uni-app은 제목 표시줄 텍스트를 왼쪽에 정렬합니다. 제목 표시줄 텍스트를 중앙에 배치해야 하는 경우 다음 방법으로 이를 수행할 수 있습니다.
사용자 정의 제목 표시줄에 텍스트 컨테이너를 추가합니다. 텍스트 컨테이너의 중앙에 맞춰야 하는 텍스트를 추가하세요.text-align: center;
위 내용은 uniapp에서 제목 표시줄을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
