유니앱 페이지에 탭바가 없으면 어떻게 해야 하나요?

UniApp을 사용하여 모바일 애플리케이션을 개발할 때 페이지에 하단 TabBar를 추가해야 하는 경우가 종종 있습니다. 그런데 UniApp을 사용하여 페이지를 개발할 때 하단의 TabBar가 표시되지 않는 경우가 가끔 있습니다. UniApp에서는 페이지에 기본적으로 TabBar가 포함되어 있지 않아 수동으로 추가해야 하기 때문입니다.

그렇다면 UniApp 페이지에 TabBar를 추가하는 방법은 무엇일까요? 아래에서 단계별로 소개하겠습니다.

먼저 App.vue 파일에 TabBar 구성 요소를 추가해야 합니다. App.vue 파일을 열고 템플릿 태그 아래에서 코드를 찾은 후 다음 TabBar 태그를 추가합니다.

<tabbar>
  <tabbar-item icon="home" title="首页" path="/pages/index/index"></tabbar-item>
  <tabbar-item icon="search" title="搜索" path="/pages/search/search"></tabbar-item>
  <tabbar-item icon="cart" title="购物车" path="/pages/cart/cart"></tabbar-item>
  <tabbar-item icon="user" title="我的" path="/pages/user/user"></tabbar-item>
</tabbar>

위 코드에서는 "Home", "Search", "Shopping Cart" 및 "Shopping Cart"라는 4개의 TabBar 메뉴를 추가했습니다. "나"''를 선택하고 해당 페이지 경로를 지정합니다. 그 중 각 TabBar 메뉴는 tabbar-item 태그로 표시됩니다. 이 태그에는 아이콘, 제목, 경로라는 세 가지 속성이 포함되어 있으며, 각각 메뉴의 해당 페이지의 아이콘, 제목, 경로를 나타냅니다.

다음으로 각 페이지에 페이지 경로를 추가해야 합니다. 홈페이지에서 index.vue와 같이 TabBar를 추가하려는 페이지를 열고 스크립트 태그 아래에 내보내기 기본 코드 블록을 찾아 다음 코드를 추가합니다.

export default {
  onShow() {
    uni.setTabBarItem({
      index: 0,
      text: '首页',
      iconPath: '/static/tabBar/home.png',
      selectedIconPath: '/static/tabBar/home-active.png'
    })
  }
}

위 코드에서는 onShow life를 사용합니다. 현재 페이지의 TabBar 메뉴를 설정하는 순환 기능입니다. 그 중 setTabBarItem 함수는 index, text, iconPath, selectedIconPath의 4가지 속성을 포함하여 TabBar의 특정 메뉴 속성을 설정하는 데 사용됩니다. 여기에서는 메뉴의 색인, 제목, 일반 상태의 아이콘, 선택한 상태의 아이콘을 포함하여 "홈" 메뉴의 속성을 설정합니다.

마지막으로 Pages.json 구성 파일에서 각 페이지의 경로를 정의해야 합니다. Pages.json 구성 파일을 열고 다음 코드를 추가합니다.

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {}
    },
    {
      "path": "pages/search/search",
      "style": {}
    },
    {
      "path": "pages/cart/cart",
      "style": {}
    },
    {
      "path": "pages/user/user",
      "style": {}
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/static/tabBar/home.png",
        "selectedIconPath": "/static/tabBar/home-active.png"
      },
      {
        "pagePath": "pages/search/search",
        "text": "搜索",
        "iconPath": "/static/tabBar/search.png",
        "selectedIconPath": "/static/tabBar/search-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "/static/tabBar/cart.png",
        "selectedIconPath": "/static/tabBar/cart-active.png",
        "badge": 0
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "/static/tabBar/user.png",
        "selectedIconPath": "/static/tabBar/user-active.png"
      }
    ]
  }
}

위 코드에서는 4개 페이지의 경로를 정의하고, 페이지 경로, 메뉴 텍스트 및 TabBar 속성을 포함한 TabBar 메뉴 속성을 정의합니다. 정상 상태. 메뉴 아이콘 및 선택된 상태의 메뉴 아이콘.

이제 TabBar 메뉴를 추가하는 단계가 완료되었습니다. UniApp 애플리케이션을 다시 컴파일하여 효과를 확인할 수 있습니다. 모든 것이 잘 진행되면 페이지 하단에 TabBar 메뉴가 표시되는 것을 볼 수 있습니다.

일반적으로 UniApp에는 기본적으로 TabBar 메뉴가 포함되어 있지 않으므로 수동으로 추가해야 합니다. App.vue 파일에 TabBar 컴포넌트를 추가하고, 각 페이지에 페이지 경로를 추가하고, Pages.json 구성 파일에 TabBar 메뉴 속성을 정의하면 TabBar 메뉴 기능을 쉽게 구현할 수 있습니다.

위 내용은 유니앱 페이지에 탭바가 없으면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!