uniappでタブバーを表示する方法

Uniapp のタブバー表示方法: まず、pages 配列の最初の項目がアプリケーションの起動ページを表し、それを [page.js] ファイルで構成します。コードは ["path" : "pages/] です。 show/show ","style" : {"navigationBarT].

このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、これこの方法は、すべてのブランドのコンピュータに適しています。

# 推奨 (無料): ユニアプリ開発チュートリアル

# #uniappでタブバーを表示する方法 ：

• #位置を先頭に設定した場合、アイコンは表示されません

• tabBar のリストは配列であり、少なくとも 2 つ、最大 5 つのタブでのみ構成でき、タブは配列の順序で並べ替えられます。最初のロードを切り替えるときに #tabbar が時間内にレンダリングされない可能性があります。各タブバー ページの onLoad ライフ サイクルで最初にロードできます。待機中のスノーフレークをポップアップします (Hello uni-app はこのメソッドを使用します)

• タブバー ページは一度表示され、メモリに残ります。タブバー ページを再度切り替えると、各ページのみがトリガーされます。onShow は、onLoad をトリガーしなくなります。

• タブバーのページは、次のとおりです。トップは現在 WeChat アプレットでのみサポートされています。トップ タブを使用する必要がある場合は、タブバーのトップ設定を使用しないことをお勧めします。トップ タブを自分で作成するには、hello uni-app- を参照してください。 >テンプレート->トップタブ。

• 2番目に、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 ページを設定した後で成功しました。この問題が発生したかどうかはわかりません。

わかりました、設定は成功しました。レンダリングは次のとおりです

関連する無料学習の推奨事項:

(ビデオ)

以上がuniappでタブバーを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。