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

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

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

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

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

推奨: 「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"
	}

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

4. 見てみましょう 結果 (レンダリング)

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

uniapp チュートリアル

"

以上がuniapp アプレットでタブバー下部のナビゲーション バーを構成するための実践的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はjb51.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。