WeChat アプレットは下部ナビゲーション バーにカスタム tabBar を実装します

重要!
1. カスタム タブ バー コンポーネントのディレクトリの場所はページと同じレベルである必要があり、カスタム コンポーネント フォルダーに配置することはできません。そうしないと、下部のナビゲーション バーが異常にジャンプします。

ここに画像の説明を挿入します
2. 選択された値がリセットされるのを防ぐために、選択された値はジャンプ後に初期化されるため、ジャンプのターゲット ページには onShow ライフ サイクルに次のコードが含まれている必要があります。(注: ポイント 1 が完了していない場合、this.getTabBar() は未定義になり、値を割り当てるために setData() メソッドを呼び出すことができないため、カスタム タブ バー コンポーネントはページと同じレベルにある必要があります)

onShow: function () {
    
    
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
    
    
      this.getTabBar().setData({
    
    
        selected: 0 // 选中的tabBar
      })
    }
  },

WeChat 公式カスタム tabBar の例

おすすめ

転載: blog.csdn.net/TurtleOrange/article/details/120502590