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

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

이 튜토리얼의 운영 환경: 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": "展示"
      }]
  } 
  }

  에서 구성해주세요.
처음에는 왜 표시되지 않는지 몰랐습니다. "tabBar"에 2개의 페이지를 구성했는데 3개의 페이지를 구성한 후에 성공했습니다. 혹시 이런 문제가 발생했는지 궁금합니다

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

관련 무료 학습 추천 : php 프로그래밍

(동영상)

위 내용은 uniapp에서 탭바를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!