WeChat アプレット設定の下部ナビゲーション バー

1 はじめに

まずレンダリングを見てみましょう。

知らせ：

• ナビゲーション バーの最大数は 5 で、最小は 2 です。

2. アイコンの準備

Ali アイコン ライブラリhttp://www.iconfont.cn/collections/show/29
Web サイトに入り、必要なアイコンを選択し、ホームページなどの下のダウンロード ボタンをクリックし、対応する png ファイルをダウンロードします。

3. 小さなプログラムのタブバー設定

pages.jsonファイル内で次のコードを構成します。

{
    
    
  "easycom": {
    
    
    "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
  },
  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
    
    
      "path": "pages/home/home",
      "style": {
    
    
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": false
      }
    },
    {
    
    
      "path": "pages/monitor/monitor",
      "style": {
    
    
        "navigationBarTitleText": "监控",
        "enablePullDownRefresh": false
      }
    },
    {
    
    
      "path": "pages/alarm/alarm",
      "style": {
    
    
        "navigationBarTitleText": "告警",
        "enablePullDownRefresh": false
      }
    },
    {
    
    
      "path": "pages/user/user",
      "style": {
    
    
        "navigationBarTitleText": "",
        "navigationStyle": "custom"
      }
    }
  ],
 "tabBar": {
    
    
    "color": "#000000",
    "selectedColor": "#1296db",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
    
    
        "pagePath": "pages/home/home",
        "iconPath": "static/img/tabbar/home.png",
        "selectedIconPath": "static/img/tabbar/home_active.png",
        "text": "首页"
      },
      {
    
    
        "pagePath": "pages/monitor/monitor",
        "iconPath": "static/img/tabbar/monitor.png",
        "selectedIconPath": "static/img/tabbar/monitor_active.png",
        "text": "监控"
      },
      {
    
    
        "pagePath": "pages/alarm/alarm",
        "iconPath": "static/img/tabbar/alarm.png",
        "selectedIconPath": "static/img/tabbar/alarm_active.png",
        "text": "告警"
      },
      {
    
    
        "pagePath": "pages/user/user",
        "iconPath": "static/img/tabbar/my.png",
        "selectedIconPath": "static/img/tabbar/my_active.png",
        "text": "我的"
      }
    ]
  },

  "globalStyle": {
    
    
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }

タブバーパラメータの説明:

パラメータ	説明
色	選択されていない場合の下部ナビゲーション テキストの色
選択された色	選択したテキストの色を設定します
ボーダースタイル	ナビゲーションの下の境界線のサンプルの色 (ここにスタイルが記述されていない場合、デフォルトの明るい灰色の線がナビゲーション ボックスの上の境界線に表示されることに注意してください)
背景色	ナビゲーションバーの背景色
リスト	ナビゲーション構成配列
ページパス	ページアクセスアドレス
アイコンパス	ナビゲーションアイコン
selectedIconPath	選択状態のナビゲーション アイコン
文章	ナビゲーションテキスト