ミニプログラムでuniappのタブバーを設定する方法

小規模プログラムの開発に伴い、小規模プログラム開発の仲間に加わる人がますます増えています。 Uniapp は、1 つのコードで複数の端末 (小さなプログラムを含む) を開発する効果を実現できるクロスプラットフォーム開発ツールです。では、ミニプログラムでuniappのタブバーを設定するにはどうすればよいでしょうか?

まず、uniapp でのタブバーの設定を pages.json ファイルで構成する必要があります。ミニ プログラムでは、まず pages.json ファイル内のタブバー オプションをミニ プログラムの構文に変換する必要があります。具体的には、tabBar のリスト内の各項目の text、pagePath、iconPath、および selectedIconPath を、対応するミニ プログラムの構文は次のとおりです。

"tabBar": {
  "list": [
    {
      "text": "首页",
      "iconPath": "static/img/tabbar/home.png",
      "selectedIconPath": "static/img/tabbar/home-active.png",
      "pagePath": "pages/index/index"
    },
    {
      "text": "分类",
      "iconPath": "static/img/tabbar/cate.png",
      "selectedIconPath": "static/img/tabbar/cate-active.png",
      "pagePath": "pages/cate/cate"
    }
  ]
}

次に、ミニ プログラム ページで、uni.getTabBar() メソッドを使用してミニ プログラムのタブバー オブジェクトを取得する必要があります。次に、uniapp のタブバーに従って構成し、対応する設定を行います。コードは次のとおりです。

<template>
  <view>
    <text>首页</text>
  </view>
</template>

<script>
  export default {
    onShow() {
      // 获取tabbar对象
      let tabBar = uni.getTabBar();
      // 设置当前tab的下标
      tabBar.setSelectedItem({
        index: 0
      });
      // 设置当前tab的文字
      tabBar.setItemText({
        index: 0,
        text: '首页'
      });
      // 设置当前tab的图标
      tabBar.setIcon({
        index: 0,
        iconPath: 'static/img/tabbar/home.png',
        selectedIconPath: 'static/img/tabbar/home-active.png'
      });
    }
  }
</script>

上記のコードでは、onShow はアプレット ライフ サイクルのフック関数であり、アプレットでページが表示されるときに自動的に呼び出されます。このフック関数では、アプレットのタブバー オブジェクトを取得し、uniapp で設定されたタブバーに従ってそれを設定します。

最後に、ミニ プログラムの各ページで上記の設定を行う必要があります。コードの繰り返しや不要なトラブルを避けるために、uniapp が提供するミックスイン機能を使用してこれらの設定をミックスインにカプセル化し、使用する必要があるページでそれを参照できます。具体的なコードは次のとおりです。

// tabBarMixin.js
export default {
  onShow() {
    // 获取当前页面路径
    let pages = getCurrentPages();
    let currentPage = pages[pages.length - 1].route
    // 获取tabbar对象
    let tabBar = uni.getTabBar();
    // 遍历tabbar中的每一个tab，找到与当前页面路径匹配的tab
    tabBar.list.forEach((item, index) => {
      if (item.pagePath == currentPage) {
        // 设置当前tab的下标
        tabBar.setSelectedItem({
          index: index
        });
        // 设置当前tab的文字
        tabBar.setItemText({
          index: index,
          text: item.text
        });
        // 设置当前tab的图标
        tabBar.setIcon({
          index: index,
          iconPath: item.iconPath,
          selectedIconPath: item.selectedIconPath
        });
      }
    });
  }
}

// index.vue
<script>
import tabBarMixin from '@/mixins/tabBarMixin'

export default {
  mixins: [tabBarMixin]
}
</script>

上記のコードでは、すべてのタブバー設定をミックスインにカプセル化し、使用する必要があるページでそれを参照します。この利点は、コードの重複を回避できることと、タブバーの設定を便利かつ均一に管理できることです。

要約すると、uniapp がミニ プログラムの下にタブバーを設定するときは、まず pages.json ファイル内の構成をミニ プログラムの構文に変換してから、 # を使用する必要があります。 # ミニ プログラム ページ内 #uni.getTabBar()メソッドはタブバー オブジェクトを取得し、uniapp で設定されたタブバーに従ってそれを設定します。コードの重複を避けるために、タブバー設定をミックスインにカプセル化し、使用する必要があるページで参照できます。

以上がミニプログラムでuniappのタブバーを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。