uniappでタブバーのスタイルをカスタマイズする方法の詳細な紹介

Uniapp は、開発者が vue 構文を使用して複数のプラットフォーム用のアプリケーションを迅速に構築できるようにするクロスプラットフォーム開発フレームワークです。このうち、uniapp に付属するタブバー コンポーネントは下部ナビゲーション バーの機能を簡単に実装できますが、デフォルトのスタイルではニーズを満たさない可能性があるため、タブバーのスタイルをカスタマイズする必要があります。以下では、uniapp がタブバーのスタイルをカスタマイズする方法を詳しく紹介します。

1. tabBar.vue コンポーネントを作成する

uniapp プロジェクトのコンポーネント ディレクトリに tabBar という名前のコンポーネントを作成します。このコンポーネントは tabbar の基本コンポーネントとして機能し、tabbar を含みます. 全体のレイアウトと切り替え効果。

tabBar.vue コンポーネントのテンプレート コードは次のとおりです。

<template>
  <view>
    <view>
      <view>
        <img  src="/static/imghw/default1.png" data-src="index === activeIndex ? item.selectedIconPath : item.iconPath" class="lazy" alt="uniappでタブバーのスタイルをカスタマイズする方法の詳細な紹介" >
      </view>
      <view>{{ item.text }}</view>
    </view>
  </view>
</template>

2. tabBar コンポーネントをホームページ Home.vue に導入します

tabbar コンポーネントをホームページに追加し、タブバーのリスト データをホームページにバインドします。タブバーのリストデータは配列であり、各タブとそれに対応するアイコン、テキスト、その他の情報が含まれます。

Home.vue のテンプレート コードは次のとおりです:

<template>
  <view>
    <view>
      <router-view></router-view>
    </view>
    <tabbar></tabbar>
  </view>
</template>

<script>
import tabBar from "@/components/tabBar"

export default {
  name: "Home",
  components: { tabBar },
  data() {
    return {
      activeIndex: 0,
      list: [
        {
          iconPath: "/static/tab_home.png",
          selectedIconPath: "/static/tab_home_active.png",
          text: "首页",
        },
        {
          iconPath: "/static/tab_message.png",
          selectedIconPath: "/static/tab_message_active.png",
          text: "消息",
        },
        {
          iconPath: "/static/tab_mine.png",
          selectedIconPath: "/static/tab_mine_active.png",
          text: "我的",
        },
      ],
    };
  },
  methods: {
    onTabBarChange(index) {
      this.activeIndex = index;
    },
  },
};
</script>

3. カスタム タブバー スタイル

カスタマイズされたタブバー スタイルは App.vue で行う必要があります。タブバーはアプリケーション全体で共有されるため、App.vue でスタイルを定義する必要があります。ここでは 3 つのスタイル効果をカスタマイズします。

スタイル 1: アイコンのサイズと位置を変更します

<style>
.uni-tabbar-item-icon {
  position: relative;
  top: -3px; //图标向上偏移
  img {
    width: 24px; //图标宽度
    height: 24px; //图标高度
  }
}
</style>

スタイル 2: テキストのサイズと色を変更します

<style>
.uni-tabbar-item-text {
  font-size: 12px; //文字大小
  color: #999; //文字颜色
}
.uni-tabbar-item-active .uni-tabbar-item-text {
  color: #007aff; //选中状态下文字颜色
}
</style>

スタイル 3: 背景色と影を追加します

<style>
.uni-tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 55px; //tabbar高度
  background-color: #fff; //背景色
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1); //阴影
  z-index: 100;
}
</style>

4. 最終効果

タブバー スタイルをカスタマイズする上記の手順により、タブバー コンポーネントのカスタム スタイル設定を正常に実装できました。結果は次のとおりです。

概要

vue 構文と uniapp フレームワークによって提供されるタブバー コンポーネントを通じて、下部の機能を迅速に実装できます。ナビゲーションバー。同時に、タブバーのスタイルをカスタマイズすることで、タブバーをニーズに合わせて作成し、アプリケーションのユーザー エクスペリエンスを向上させることができます。

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