uniappでボトムメニューを共有する方法

モバイル デバイスの急速な発展に伴い、クロスプラットフォーム開発に uniapp を使用する開発者が増えています。モバイル アプリケーションでは、ボトム メニューは非常に一般的な UI コンポーネントです。iOS と Android の違いとは異なり、uniapp を使用すると、さまざまなプラットフォームで一貫したボトム メニューの操作とスタイルを実現できますが、ボトム メニューを共有するにはどうすればよいでしょうか?この記事では、uniapp が共通のボトムメニューを実装する方法を詳しく紹介します。

1. ボトム メニュー コンポーネントの使用

uniapp では、公式のボトム メニュー コンポーネント uni-tabbar が提供されており、使用時に page.json ファイル内で参照できます。下部のメニューコンポーネントはuni-tabbarのpages属性を設定することでページジャンプを実現できます。下部のメニュー コンポーネントは 4 つのタブ ページの構成のみをサポートしており、各ページはページ タグでラップする必要があることに注意してください。

例は次のとおりです:

{
  "tabBar": {
    "color":"#999",
    "selectedColor":"#007aff",
    "borderStyle":"black",
    "backgroundColor":"#f9f9f9",
    "list":[{
      "pagePath":"pages/home/index",
      "text":"首页",
      "iconPath":"/static/tabbar/home.png",
      "selectedIconPath":"/static/tabbar/home_active.png"
    },{
      "pagePath":"pages/category/index",
      "text":"分类",
      "iconPath":"/static/tabbar/category.png",
      "selectedIconPath":"/static/tabbar/category_active.png"
    },{
      "pagePath":"pages/cart/index",
      "text":"购物车",
      "iconPath":"/static/tabbar/cart.png",
      "selectedIconPath":"/static/tabbar/cart_active.png"
    },{
      "pagePath":"pages/user/index",
      "text":"我的",
      "iconPath":"/static/tabbar/user.png",
      "selectedIconPath":"/static/tabbar/user_active.png"
    }]
  }
}

下部のメニュー コンポーネントを使用する場合、開発者は各ページの page.json ファイルで対応する tabBar 属性を構成するだけで済みます。各ページの page.json ファイルで設定する必要がありますが、この方法は煩雑であり、ボトム メニューの共有には適していません。

2. ボトム メニュー コンポーネントのカプセル化

一部の開発者は、ボトム メニューをコンポーネントの形式でカプセル化するなど、ボトム メニュー コンポーネント自体をカプセル化することを選択します。ページ内に紹介されている下部のメニューを使用する必要があります。この方法の方が便利ですが、下部のメニュー コンポーネントを uniapp にカプセル化するときに行う必要のある簡単な作業もいくつかあります。

まず、下部のメニュー コンポーネントで、ネイティブ uni-API の uni.getSystemInfoSync() メソッドを使用して、デバイスの画面の高さと下部のメニューの高さを計算する必要があります。下部メニューを除いたページの高さ。次に、通常のページ スクロールを実現できるように、対応する下部メニューの高さとページの高さを各ページで手動で設定する必要があります。

サンプル コードは次のとおりです。

<template>
  <view class="wrapper">
    <slot></slot>
    <view class="tabbar" :style="{ height: tabBarHeight + 'px' }">
      <!-- 底部菜单内容 -->
    </view>
  </view>
</template>

<script>
  import api from '@/utils/api'
  export default {
    data() {
      return {
        tabBarHeight: 0
      }
    },
    mounted() {
      this.getSystemInfo()
    },
    methods: {
      getSystemInfo() { // 获取设备信息
        const systemInfo = uni.getSystemInfoSync()
        this.tabBarHeight = api.pxToRpx(systemInfo.screenHeight - systemInfo.safeArea.bottom)
        this.setPageStyle()
      },
      setPageStyle() { // 设置页面样式
        uni.createSelectorQuery().select('.wrapper').boundingClientRect(rect => {
          const height = api.pxToRpx(rect.height)
          uni.$emit('setPageStyle', {height: height, tabBarHeight: this.tabBarHeight})
        }).exec()
      }
    }
  }
</script>

<style>
  .wrapper {
    height: 100%;
  }
  .tabbar {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    background-color: #fff;
    border-top: 1px solid #ddd;
    text-align: center;
  }
</style>

各ページで、uni.$emit('setPageStyle') イベントをリッスンし、ページに従って対応するスタイルを設定する必要があります。ページのスクロールが正常に機能するように、高さと下部メニューの高さを調整します。

ボトム メニュー コンポーネントをパブリックに使用するために自分でカプセル化することもできますが、これはより面倒で、いくつかの些細な問題に対処する必要があるため、uniapi に慣れていない初心者には適していません。

3. プラグインの使用

モバイル アプリケーションではボトム メニューが非常に一般的であるため、多くの開発者が uniapp ボトム メニュー プラグインをカプセル化しており、これにより開発者はいくつかの些細なことを省くことができます。 。 仕事。プラグインを使用すると、迅速かつ便利な呼び出しを実現し、スタイルやインタラクションを簡単にカスタマイズできます。

uniapp ボトム メニュー プラグインの使い方は非常に簡単で、対応するプラグインを page.json ファイルに導入するだけです。プラグインを使用すると、下部メニューのインタラクティブな機能やスタイルを簡単に設定できるため、uniapi に慣れていない初心者にも適しています。

この記事では、使いやすさと拡張性を兼ね備えた、シンプルで使いやすいuniappボトムメニュープラグイン「uniui-tabbar」を紹介します。下部のメニューはカスタマイズ可能です。

公式ドキュメントを参照すると、uniui-tabbar の使用法にすぐに慣れることができます:

<template>
  <view>
    <!-- 页面内容 -->
  </view>
  <uniui-tabbar :active="active" :tab-bar-list="tabBar.list" @onChange="onChange"></uniui-tabbar>
</template>

<script>
  export default {
    data() {
      return {
        active: 0,
        tabBar: {
          color:"#999",
          selectedColor:"#007aff",
          borderStyle:"black",
          backgroundColor:"#f9f9f9",
          list:[{
            "text":"首页",
            "iconPath":"/static/tabbar/home.png",
            "selectedIconPath":"/static/tabbar/home_active.png"
          },{
            "text":"分类",
            "iconPath":"/static/tabbar/category.png",
            "selectedIconPath":"/static/tabbar/category_active.png"
          },{
            "text":"购物车",
            "iconPath":"/static/tabbar/cart.png",
            "selectedIconPath":"/static/tabbar/cart_active.png"
          },{
            "text":"我的",
            "iconPath":"/static/tabbar/user.png",
            "selectedIconPath":"/static/tabbar/user_active.png"
          }]
        }
      }
    },
    methods: {
      onChange(index) {
        this.active = index
        uni.switchTab({
          url: '/' + this.tabBar.list[index].pagePath
        })
      }
    }
  }
</script>

uniui-tabbar プラグインを使用する場合、下部のメニュー データと設定を行うだけで済みます。その後、データを tab-bar -list 属性に渡すだけで十分です。 onChangeイベントでボトムメニューの切り替えイベントを監視し、ボトムメニューの切り替え時にuni.switchTabAPIを使用してページにジャンプすることができます。開発者は、さまざまな些細な計算やスタイルの調整を実行するのではなく、ボトム メニューのデータとスタイルの定義にのみ集中する必要があります。

概要:

開発プロセス中、実際のニーズに基づいてパブリックボトムメニューを実装するための適切な方法を選択する必要があります。 uniappでは公式のコンポーネントやプラグインを利用した方が便利ですが、どの方法を選択するかは実際の状況によって異なります。共通のボトムメニューを実装する場合は、不要な作業負荷を軽減し、コードの再利用とコードの簡素化に重点を置くことで、開発効率とコードの可読性を向上させます。

以上がuniappでボトムメニューを共有する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。