ホームページ > 記事 > ウェブフロントエンド > uniapp アプレットでタブバー下部のナビゲーションバーを構成するための実践的なガイド

uniapp アプレットでタブバー下部のナビゲーションバーを構成するための実践的なガイド

WBOY転載: 2022-09-15 15:33:496916ブラウズ

この記事では、uniapp に関する関連知識を提供します。tabBar アプリケーションがマルチタブアプリケーションの場合、tabBar 構成項目を通じてタブバーのパフォーマンスを指定でき、タブを開くときの対応する表示も指定できます。切り替えページ、一緒に見ていきましょう、皆さんのお役に立てれば幸いです。

推奨: 「uniapp チュートリアル」

下部のナビゲーションバーを構成するには、まず、必要なアイコンを準備する必要があります。各タブでは、選択前と選択後の 2 つのアイコンを選択できます。その後、uniapp 公式 Web サイトが提供する

uniapp 公式 Web サイトのタブバー設定項目に基づいて、下部のナビゲーションバーを設定する方法を学習します。

Text

まず、公式 Web サイトの紹介を見てみましょう。
アプリケーションがマルチタブアプリケーションの場合、最初のタブを指定できます。 -レベルのナビゲーションバーとタブを介してtabBar設定項目を切り替えると、対応するページが表示されます。
pages.json で tabBar 構成を提供することは、ナビゲーションの迅速な開発を促進するだけでなく、より重要なことに、アプリとアプレット側のパフォーマンスを向上させることです。これら 2 つのプラットフォームでは、基礎となるネイティブエンジンは、pages.json で構成された tabBar 情報を直接読み取り、起動時に js エンジンが初期化されるのを待たずにネイティブタブをレンダリングできます。

Tips

位置を先頭に設定するとアイコンは表示されません
tabBar のリストは配列なので、少なくとも 2 つ、最大 5 つのタブで構成されている場合、タブは配列の順序でソートされます。
初めて切り替えるときにタブバーが時間内にレンダリングされない可能性があります。各タブバーページの onLoad ライフサイクルで最初に読み込みをポップアップできます。
タブバーページは、一度表示された後はメモリに保持されます。タブバーページを再度切り替えると、各ページの onShow がトリガーされるだけで、再度 onLoad がトリガーされることはありません。
上部のタブバーは現在、WeChat ミニプログラムでのみサポートされています。トップタブを使用する必要がある場合は、タブバーのトップ設定を使用するのではなく、hello uni-app->Template->Top Tab を参照してトップタブを自分で作成することをお勧めします。

1. まず、プロジェクトに必要なタブアイコンを準備します

ここでは 3 つのタブ (選択の前後) を切り替えるために使用する 6 つのアイコンを用意しました。 static フォルダーの下の tabbar フォルダーの下に配置します:

#2.pages.json ファイルを見つけて設定します

## globalStyle の場所を指定し、その下にあるタブバーを設定します。

##コードスニペットは次のとおりです:

// 配置tabbar导航栏
	"tabBar": {
		"borderStyle": "black",
		"selectedColor": "#FB7299",
		"color": "#444444",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/tabbar/find.png",
				"selectedIconPath": "static/tabbar/find-selected.png",
				"text": "发现"
			},{
				"pagePath": "pages/cate/cate",
				"iconPath": "static/tabbar/cate.png",
				"selectedIconPath": "static/tabbar/cate-selected.png",
				"text": "分类"
			},{
				"pagePath": "pages/mine/mine",
				"iconPath": "static/tabbar/my.png",
				"selectedIconPath": "static/tabbar/my-selected.png",
				"text": "我的"
			}
		]
	}

これらの設定項目が何を意味するのか知らない友人も多いと思います。公式 Web サイトの設定項目のスクリーンショットを添付します。序文のリンクから公式 Web サイトを確認することもできます。(今回使用したものは)これらは最も基本的な属性の一部です。)

3. ナビゲーションバーのタイトルコンテンツを構成します

友人用の公式 Web サイトのアドレス

ナビゲーションバーのタイトルコンテンツは、以下に示すようにページの上部にあります:

コード例は次のとおりです: (いくつかの一般的な構成)私が使用する項目は自分で変更できます)

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "配置底部导航栏"
			}
		}
	    ,{
            "path" : "pages/mine/mine",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "我的",
                "enablePullDownRefresh": false
            }
            
        },
		{
		    "path" : "pages/cate/cate",
		    "style" :                                                                                    
		    {
				// 导航栏标题文字内容
		        "navigationBarTitleText": "分类",
				// 是否开启下拉刷新
		        "enablePullDownRefresh": false
		    }
		    
		}
    ],
	// 默认页面的样式
	"globalStyle": {
		// 导航栏标题颜色及状态栏前景颜色，仅支持 black/white
		"navigationBarTextStyle": "black",
		// 导航栏标题文字内容
		"navigationBarTitleText": "配置底部导航栏",
		// 导航栏背景颜色（同状态栏背景色）
		"navigationBarBackgroundColor": "#55aaff",
		// 下拉显示出来的窗口的背景色
		"backgroundColor": "#ffff7f"
	}

いくつかの構成項目の意味についてコメントを書きました。自分で見てください。