uniapp에서 탭바를 표시하는 방법-uni-app-php.cn

uniapp에서 탭바를 표시하는 방법: 먼저 페이지 배열의 첫 번째 항목은 애플리케이션 시작 페이지를 나타내고 [page.js] 파일에서 구성합니다. 코드는 ["path" : "pages/show/show입니다. ","style " : {"navigationBarT】.

uniapp에서 탭바를 표시하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, uni-app2.5.1 버전, 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

권장됩니다. ):uni-app.개발 튜토리얼

uniapp에서 탭바를 표시하는 방법:

먼저 공식 웹사이트에서 tabBar에 대해 알아보세요

애플리케이션이 멀티탭 애플리케이션인 경우 다음을 수행할 수 있습니다. tabBar 구성 항목을 통해 탭 표시줄의 성능과 탭 전환 시 표시 여부를 지정합니다.

위치를 맨 위로 설정하면 탭 표시줄의 목록이 배열로 표시되지 않습니다. , 탭은 최소 2개, 최대 5개까지만 구성할 수 있습니다.
처음 전환 시 탭바가 제시간에 표시되지 않을 수 있습니다. 각 탭바 페이지의 onLoad 수명 주기에서 대기 중인 눈송이(hello uni-app은 이 방법을 사용함)
tabbar 페이지 표시 한 번 후에는 탭바 페이지를 다시 전환하면 onShow만 트리거됩니다.
상단 탭바는 현재 WeChat 애플릿에서만 지원됩니다. 그렇다면 탭바의 상단 설정을 사용하지 말고 직접 상단 탭을 만드는 것이 좋습니다. . hello uni-app->Template->상단탭

을 참고하시면 됩니다. 둘째, page.js 파일

{ "pages": [ //pages数组中第一项表示应用启动页， { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } } ,{ "path" : "pages/show/show", "style" : { "navigationBarTitleText": "show" } } ,{ "path" : "pages/component/component", "style" : { "navigationBarTitleText": "component" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "tabBar": { "color": "#F0AD4E", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#F8F8F8", "list": [{ "pagePath": "pages/index/index", "iconPath": "static/logo.png", "selectedIconPath": "static/logo.png", "text": "首页" },{ "pagePath": "pages/component/component", "iconPath": "static/logo.png", "selectedIconPath": "static/logo.png", "text": "组件" }, { "pagePath": "pages/show/show", "iconPath": "static/logo.png", "selectedIconPath": "static/logo.png", "text": "展示" }] } }

로그인 후 복사

에서 구성해주세요.

자, 구성에 성공했습니다. 렌더링은 다음과 같습니다

관련 무료 학습 추천 : uniapp에서 탭바를 표시하는 방법 php 프로그래밍