uniapp에서 하단 탐색을 구성 요소화하는 방법-uni-app-php.cn

uniapp에서 하단 탐색을 구성 요소화하는 방법

coldplay.xixi

풀어 주다： 2023-01-13 00:44:15

원래의

3715명이 탐색했습니다.

Uniapp의 하단 탐색 구성 요소화 방법: 먼저 페이지 디렉터리에 페이지를 만든 다음 탐색 아이콘을 만들고 마지막으로 [pages.json] 파일 아래에 tabBar를 구성합니다.

uniapp에서 하단 탐색을 구성 요소화하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전, Dell G3 컴퓨터.

추천(무료): uni-app 개발 튜토리얼

Uniapp의 하단 네비게이션 컴포넌트화 방법:

tabBar 매개변수 설명

color: 네비게이션 바 글꼴 색상
선택색상 : 선택한 글꼴의 색상
backgroundColor: 하단 배경 색상
borderStyle: 하단 테두리 색상, "검은색" 또는 "흰색"만 가능함
list: 다음을 포함한 개체 options

{
pagePath：页面路径
text：底部导航文字
iconPath：没选中前的图标路径
selectedIconPath：选中后的图标路径
}

로그인 후 복사

1단계: 페이지 디렉터리에 페이지 만들기

uniapp에서 하단 탐색을 구성 요소화하는 방법

생성된 디렉터리와 페이지 이름입니다(참고용)

uniapp에서 하단 탐색을 구성 요소화하는 방법

2단계: 페이지 만들기 탐색 아이콘

(1) 알리바바 벡터 아이콘 라이브러리(Iconfont) 열기

(2) 적절한 아이콘을 찾아 장바구니에 추가

(3) 다운로드할 적절한 색상과 형식 선택

단계 3: 페이지의 .json 파일에서 tabBar 구성

{
      "pages":[
            ...
      ],
      "tabBar": {
"color":"#8a8a8a",
"selectedColor":"#00aa00",
"borderStyle":"black",
"backgroundColor":"#ffffff",
"list": [
{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"static/home_normal.png",
"selectedIconPath":"static/home.png"
},
{
"pagePath":"pages/search/search",
"text":"发现",
"iconPath":"static/search_normal.png",
"selectedIconPath":"static/search.png"
},
{
"pagePath":"pages/me/me",
"text":"我的",
"iconPath":"static/me_normal.png",
"selectedIconPath":"static/me.png"
}
]
},
      "globalStyle": {
...
}
}

로그인 후 복사

효과 표시

uniapp에서 하단 탐색을 구성 요소화하는 방법