マイクロチャネルアプレットカスタムナビゲーションバー（1）

元ボーエン鑑賞https://www.cnblogs.com/sese/p/9761713.html簡単なエクササイズを。

app.jsonウィンドウ構成1. navigationStyle

2.相関値を計算します

1.全体のナビゲーションバーの高さ。

2.カプセルボタンの上面からの距離が、

ボタンの右側からカプセル。

アプレット （）wx.getMenuButtonBoundingClientRect 取得ボタン情報とカプセル wx.getSystemInfo（） デバイス情報を取得します。

次のようにApp.jsコードは次のとおりです。

我々は計算することができ、この情報により、上記の3つの値は言いました：

1.全体のナビゲーションの高さ= statausBarHeight +高さ+（トップstatausBarHeight）* 2。

トップ=上から2カプセルボタン。

右 - 右= windowWidthからボタンでカプセル。

3.ヘッドアセンブリのナビゲーションバー

navBar.wxml

<ビュークラス= "ナビゲーションバー"スタイル= "高さ：{{navHeight}} PX;"> 
  <ビュークラス= "navbar_left"スタイル= "トップ：{{navTop}} PX;" WX：= "は、{{showNav}}">場合
    <ビューバインド：= "navBack"> <画像SRC = "/画像/ back.png"> </ image>を</ビュー>クリック
    <ビュークラス= "nav_line"をバインド：クリック= "navHome"> <画像SRC = "/画像/ home.png"> </イメージ> </ビュー> 
  </ビュー> 
  <ビュークラス= "navbar_title"スタイル= "トップ：{{navTop}} PX; "> 
    {{ページ名}} 
  </ビュー> 
</ビュー>

navBar.wxss

.navbar { 
  幅：100％。
  オーバーフロー：隠されました; 
  位置：相対; 
  トップ：0; 
  左：0; 
  z屈折率：10。
  フレックス収縮：0; 
  背景：#FFF; 
} 
.navbar_left { 
  表示：-webkitフレックス。
  表示：フレックス。
  -webkit-ボックス整列：センター; 
  -ms-フレックス整列：センター; 
  -webkit-ALIGN-アイテム：センター; 
  ALIGN-アイテム：センター; 
  位置：絶対; 
  左：10pxの; 
  z屈折率：11。
  行の高さ：1。
  パディング：3px; 
  ボーダー：＃f0f0f0 1rpx固体; 
  国境半径：40rpx。
  オーバーフロー：隠されました; 
  背景：RGBA（255,255,255,0.6）。
}
.navbar_leftビュー{ 
  幅：50rpx。
  高さ：50rpx。
  マージン右：10rpx。
} 
.navbar_leftビュー画像{ 
  幅：100％。
  高さ：100％; 
} 
.nav_line { 
  ボーダー左：1rpx固体＃f0f0f0。
  パディング左：8px; 
} 
.navbar_title { 
  幅：100％。
  ボックスサイズ：ボーダーボックス; 
  パディング左：115px; 
  パディング右：115px; 
  高さ：32PX; 
  行の高さ：32PX; 
  テキスト整列：センター; 
  位置：絶対; 
  左：0; 
  z屈折率：10。
  色：＃333; 
  フォントサイズ：16pxに; 
  オーバーフロー：隠されました;
  フォント重量：太字;
  テキストオーバーフロー：省略記号。
  ホワイトスペース：NOWRAP。
}

navBar.js

コンポーネント// /ナビゲーションバー/ navBar.jsの
constのgetAppのApp =（）; 
コンポーネント（{ 
  オプション：{ 
    addGlobalClass：trueに、
  }、
  / ** 
   *コンポーネントの属性リスト
   * / 
  プロパティ：{ 
    ページ名：文字列、//タイトルの中間
    showNav：{ 
      型：Boolean、
      値：trueに
    }、
    ShowHome：{ 
      型：Boolean、
      値：真へ
    } 
  } 

  / ** 
   *初期データ・コンポーネント
   * / 
  データ：{ 
    
  }、

  ライフタイム：{ 
    添付：関数（）{ 
      この.setData（{ 
        navHeight：App.globalData.navHeight、
        navTop：App.globalData.navTop  
      }）
    } 
  } 
  / ** 
   *アセンブリリストの方法
   * / 
  方法：{ 
    //バックオフ未実現
    navBack：関数（）{ 
      wx.navigateBack（{ 
        デルタ:. 1 
      }）
    } 
    //リターンホーム未実現
    navHome：機能（）{ 
      wx.navigateTo（{ 
        URL： '/ページ/インデックス/インデックス' 
      }）
    }、
  } 
}）

navBar.json

で4.index

index.json

index.wxml

最終レンダリング：

マイクロチャネルアプレットカスタムナビゲーションバー（1）

おすすめ