WeChat アプレットの下部ナビゲーションバーの実装コード-ミニプログラム開発-php.cn

WeChat アプレットの下部ナビゲーションバーの実装コード

不言

リリース： 2018-08-16 15:47:07

オリジナル

8355 人が閲覧しました

この記事の内容は、WeChat アプレットの下部ナビゲーションバーの実装コードに関するものです。必要な方は参考にしていただければ幸いです。

下部ナビゲーションバーを実装するにはどうすればよいですか?つまり、下部のナビゲーションをクリックすると、対応するさまざまなページが切り替わります。

まず、実装したい下部ナビゲーションバーのレンダリングを見てみましょう: (3 つのナビゲーションアイコンの例、WeChat アプレットは最大 5 つまで追加できます)

1. アイコンの準備

Alibaba アイコンライブラリ http:// www.iconfont.cn/collections/show/29

スタッフのアバター、ホームページ、その他のよく使用されるアイコンなど、この Web サイトで使用したいアイコンをいくつかダウンロードし、「ダウンロード」をクリックしてローカルに保存し、名前を変更します。 UI 対応のアイコンを使用することもできます。

プロジェクトに戻り、新しい画像フォルダーを作成し、ダウンロードしたアイコンを後で使用できるようにそのフォルダーの下に置き、上記の名前のアイコンをミニプログラムプロジェクトディレクトリに新しく作成された画像フォルダーに保存します。準備は完了です。

2. 構成ファイルを追加します

プロジェクトのルートディレクトリで構成ファイル app.json を見つけ、次の構成情報を追加します (app.json ファイルは WeChat アプレットをグローバルに構成し、決定するために使用されます)ページファイルのパス、ウィンドウのパフォーマンス、ネットワークタイムアウトの設定、複数のタブの設定など)

   "tabBar": {
  "color": "#a9b7b7",
  "selectedColor": "#11cd6e",
  "borderStyle": "white",
  "list": [
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/logs/logs",
      "text": "日志"
    },
    {
      "selectedIconPath": "images/1.png",
      "iconPath": "images/2.png",
      "pagePath": "pages/test/test",
      "text": "测试"
    }
  ]
}

ログイン後にコピー

もちろん、上記は基本的な部分にすぎませんが、ミニプログラムの公式ドキュメントではさらに豊富なコンポーネントとスタイルが提供されています

。参考ドキュメント:
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar

OK、終了、保存、コンパイルして、ミニプログラムの古典的なボトムナビゲーション効果を実現します

=== ===========

付録: 完全なコード (無視できる程度)

{
  "pages":[
        "pages/index/index",
        "pages/category/category",
        "pages/topic/topic",        
        "pages/user/user",
        "pages/logs/logs"
  ],
  "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#000",
        "navigationBarTitleText": "WeiCMS",
        "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "color": "#8c8c8c",
    "selectedColor": "#f4645f",
    "backgroundColor": "white",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    }, 
    {
      "pagePath": "pages/category/category",      
      "text": "分类",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    },
    {
      "pagePath": "pages/topic/topic",      
      "text": "话题",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    },
    {
      "pagePath": "pages/user/user",      
      "text": "我的",
      "iconPath":"images/48.png",
      "selectedIconPath":"images/48.png"
    }  
    ],
    "position": "bottom"
  }  
}

ログイン後にコピー

WeChat アプレットの下部ナビゲーション バーの実装コード

WeChat アプレットの下部ナビゲーションバーの実装コード