返すようにマイクロ手紙アプレットカプセルボタン|ホームカスタムナビゲーションバーのコメント

ブラザー小さな初期の研究プログラムは、私は兄がタイムリーに問題領域を指摘見てほしい、感謝

商品コード：HTTPS：//github.com/Shay0921/header-navbar.git

アプレットでは、ページが一つだけ、スタックので、ノーバックボタンであるため、商品が転送されますときに、いくつかの電子ビジネスプラットフォームのために、カードにメッセージを転送するからアプレットは、顧客のビューや他の製品に影響を与えますホーム、あなたが書くためにカスタムナビゲーションバーを使用する必要があり、この時、「カプセルボタンを。」下図のように：

別のポイントから戻って、ホーム・ページのボタン製品ページにあるでしょう。

ページには、これだけホームボタン一つだけのスタックであるため、製品ページを共有するためのページから入力する場合、

まず、我々はナビゲーションバーをカスタマイズする方法をオンにする必要があり、ビューはページ手動設定項目があります：navigationStyleを

この構成アイテムの前のバージョンのみapp.js構成することができ、属性はグローバルで、現在は別のページのJSON、個々のページのカスタムナビゲーションバーの実現に設定することができます。

全体的なアイデア

ときnavigationStyle：カスタムポスト、上部タイトルバーが削除される前に、右にカプセルボタンは右上に固定されます。ステータスバー20ピクセル、タイトルバーの44px：3つのビュー（ステータスバー、タイトルバー、メインコンテンツ）現在のページを追加し、次の3つのレイアウトを見ることができますし、私は死の高さに直接書き込みます。HOMEボタンカプセル|これは、ナビゲーションバーからキーの定義である、あなたは、これら二つの高さだけでなく、リターンを計算する必要があります。財団ライブラリ2.1.0を使用することができますwx.getMenuButtonBoundingClientRectを（）得るために、カプセルの右側に位置情報ボタンを、この情報を、我々はカプセルの左側にあるボタンを追加したいの相対位置を算出することができます。wx.getSystemInfoSync statusBarHeightのステータスバー（）の高さを見つけます。

ディレクトリ構造

├── components                  组件
│  ├── headerNavbar             顶部自定义导航栏
│  │  └── headerNavbar.js
│  │  └── headerNavbar.json
│  │  └── headerNavbar.wxml
│  │  └── headerNavbar.wxss
├── pages                       页面
│  ├── index                    首页
│  │  └── index.js
│  │  └── index.json
│  │  └── index.wxml
│  │  └── index.wxss
│  ├── navigationStyle          引入自定义导航栏的页面(单独配置了navigationStyle)
│  │  └── navigationStyle.js
│  │  └── navigationStyle.json
│  │  └── navigationStyle.wxml
│  │  └── navigationStyle.wxss
│  │  └── testPage.js           路由测试页面(后面用来测试跳转显示不同胶囊按钮)
│  │  └── testPage.json
│  │  └── testPage.wxml
│  │  └── testPage.wxss复制代码

グローバル変数

app.js

カプセル右の最初のステータスバーの高さと位置情報で得られたApp.js

App({
    onLaunch: function (options) {
      // 这里省略掉了登录和获取用户信息等函数
      // 因为我在别的页面也需要使用此信息，所以没有单独获得 statusBarHeight
      wx.getSystemInfo({ // 获取设备信息
        success: (res) => {
          this.globalData.systeminfo = res
        },
      })
      // 获得胶囊按钮位置信息
      this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect()
    },
    globalData: {
        systeminfo: {}, // 系统信息
        headerBtnPosi: {} // 胶囊按钮位置信息
    }
})
复制代码

wx.getSystmInfo成功コールバックとしてではなく、オブジェクトのように存在しないように、それは、wx.getMenuButtonBoundingClientRect（）に注意すべきwx.getMenuButtonBoundingClientRect（身長）を使用すること。

コンポーネントのコード

headerNavbar.wxml

<!-- 自定义导航栏 -->
<view class='navbar-wrap' 
  style='height:{{navbarHeight}}px;padding-top:{{statusBarHeight}}px;'>  
  <view class="navbar-text"
    style='line-height:{{navbarBtn.height + navbarBtn.top}}px;'>
    {{navbarData.title ? navbarData.title : "默认标题"}}{{navbarHeight}}
  </view>
  <view class="navbar-icon"
    wx:if='{{navbarData.showCapsule ? navbarData.showCapsule : true}}'
    style="top:{{navbarBtn.top + statusBarHeight}}px;left:{{navbarBtn.right}}px;height:{{navbarBtn.height}}px;"> 
      <image wx:if='{{haveBack}}' bindtap="_goBack" class="floatL" src="/img/navbar_back_white.png"></image>      
      <view wx:if='{{haveBack}}' class="floatL"></view>
      <image bindtap="_goHome" src="/img/navbar_home_white.png"></image>
  </view>
</view>
<!-- 手写loading -->
<view class="navbar-loading" style='height:{{navbarHeight}}px;line-height:{{navbarHeight}}px;'>
  <text>...</text>
</view>复制代码

異なる画面電話に適合するために、カプセルのボタンの位置と高さが割り当て内部HTMLで必要とされる、以下では、高さを計算する方法を詳細に説明します。カスタムナビゲーションではバーコンポーネントは、2つの部分に分かれて1は、独自のロードを書く別の上部のナビゲーションバーです。

カスタムナビゲーションバーを上に固定されているので、主な内容以下のブロッキングは、我々はナビゲーションバーとメインコンテンツの間に同一の高さとナビゲーションバーを追加する必要がないことを確実にするためには、クラスが最初のボックスと呼ばれます。これは、ナビゲーションバーがメインのコンテンツに遮断されていないことを確認します。しかし、プルダウンこのページのサポートを更新する場合は、別の問題があるでしょう、その後のナビゲーションが使用には影響していないが、空白のボックスになるメインコンテンツの前で、ネイティブのスタイルブロックをロードするアプレットが、ユーザーに表示されます不可解な余分な1、ボックスだけロードの終わりに上がるだろう、非常に奇妙になります。そこでここでは、ナビゲーションバーの高さと同じように、自分の手書き下のコンポーネントの負荷のアニメーションを必要とします。

ここでは、最終的な結果を見ることができ、青色のナビゲーションバーの下に3つの点が小さなネイティブプログラムのロードされた後、以下の3つの点では、独自のロードを書きます。

そして、私たちはアプレットがネイティブの時間をロードしているとき、書き込みされて何をしたい、自分のロードは、ネイティブの負荷を置き換えることができます

headerNavbar.js

ステータスバーの高さ= app.globalData.systeminfo.statusBarHeight

注由来のカプセル位置情報は、ページの左上隅にある、あなたはそれを変換する必要があり、カプセルという名前のカプセルの元の位置情報は、今、変換後のカプセルと呼ばれます。

/*** iphone6 的胶囊位置信息
* wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
* 胶囊宽度： 87
* 胶囊高度： 32
* 胶囊左边界坐标： 278
* 胶囊上边界坐标： 26
* 胶囊右边界坐标： 365
* 胶囊下边界坐标： 58
* 状态栏高度：20*/复制代码

ステータスバーの高さ-現在のカプセルの境界座標上=カプセルマージン
スクリーン幅=から今のカプセルに-のカプセル右境界座標
境界の下で、現在のカプセルマージン=カプセルは座標-ステータスバーの高さを-カプセル高さの
境界は+ナビゲーションの高さ=カプセルを座標現在のマージンカプセルの下で

注：境界は、カプセルに含まれる座標カプセルがナビゲーションバーの中央に配置されているため、ステータスバー、カプセルとカプセル高さとステータスバーの高さとの間の距離を、マージンが低いマージンと一致しなければならないので、そう境界座標カプセルであります-カプセルの高さ-ステータスバーの高さ。

const app = getApp();
Component({
  properties: {
    navbarData: { // 由父页面传递的数据
      type: Object,
      value: {},
      observer: function (newVal, oldVal) { }
    }
  },
  data: {
    haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
    statusBarHeight: 0, // 状态栏高度
    navbarHeight: 0, // 顶部导航栏高度
    navbarBtn: { // 胶囊位置信息
      height: 0,
      width: 0,
      top: 0,
      bottom: 0,
      right: 0
    }
  },
  // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度
  attached: function () {
    let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度
    let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息
    /**
     * wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
     * 菜单按键宽度： 87
     * 菜单按键高度： 32
     * 菜单按键左边界坐标： 278
     * 菜单按键上边界坐标： 26
     * 菜单按键右边界坐标： 365
     * 菜单按键下边界坐标： 58
     */
    let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点
      height: headerPosi.height,
      width: headerPosi.width,
      // 胶囊top - 状态栏高度
      top: headerPosi.top - statusBarHeight,
      // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
      bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
      // 屏幕宽度 - 胶囊right
      right: app.globalData.systeminfo.screenWidth - headerPosi.right
    }
    let haveBack;
    if (getCurrentPages().length === 1) { // 当只有一个页面时
      haveBack = false;
    } else {
      haveBack = true;
    }
    this.setData({
      haveBack: haveBack, // 获取是否是通过分享进入的小程序
      statusBarHeight: statusBarHeight,
      navbarHeight: headerPosi.bottom + btnPosi.bottom, // 原胶囊bottom + 现胶囊bottom
      navbarBtn: btnPosi
    })
  },
  methods: {
    _goBack: function () {
      wx.navigateBack({
        delta: 1
      });
    },
    _goHome: function () {
      wx.switchTab({
        url: '/pages/index/index',
      });
    }
  }
})
复制代码

、共有からページに現在のページかどうかを判断するためにgetCurrentPages（）することにより、スタックページスタックの長さに別のページにジャンプし、共有ページからページデータのみを入力する必要が増加した場合ので、それは他のページを表示しますバック、ホームボタン。

注意：マイクロチャンネル7.0.0サポートwx.getMenuButtonBoundingClientRect（）、あなたは高さの首長のいくつかの結果を算出することで、マイクロチャネルの低互換性のあるバージョン、ナビゲーションバーコードの高さのみをしたい場合：

'iPhone'：64、
'iPhone X'：88、
'アンドロイド'：68

特定のビュー：

https://developers.weixin.qq.com/community/develop/doc/0006c012dc8028f04b070dd0551004

あなたが使用している場合はwx.getMenuButtonBoundingClientRect（）情報取得小数点を、以下に示すように

{高さ24、幅：65.25、トップ：-0.5、底：-0.5、右：101.25}

そして、あなたは、通常の100％まで低減スケールの開発ツール、の観点であってもよいです。

headerNavbar.wxss

.navbar-wrap {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 9999999;
	background-color: #3281FF;
	box-sizing: border-box;
}

.navbar-text {
	text-align: center;
	font-size: 36rpx;
	color: #fff;
	font-weight: 600;
}

.navbar-icon {
	position: fixed;
	display: flex;
	border-radius: 64rpx;
	border: 0.5px solid rgba(255,255,255, 0.3);
	box-sizing: border-box;
}

.navbar-icon image {
	height: 20px;
	width: 20px;
	padding: 5px 10px 10px;
	display: inline-block;
	overflow: hidden;
}

.navbar-icon view {
	height: 18px;
	border-left: 0.5px solid rgba(255,255,255, 0.3);
	margin-top: 6px;
}

.navbar-loading {
	background: #fff;
	text-align: center;
}
复制代码

参照コンポーネントページのコード

navigationStyle.json

{
    "navigationStyle": "custom", 
    "enablePullDownRefresh": true, 
    "backgroundTextStyle": "light", 
    "usingComponents": {
        "headerNavbar": "/components/headerNavbar/headerNavbar"
    }
}
复制代码

まずnavigationStyleを追加するために、自己定義されたページのJSONナビゲーションバーを使用する必要がある：カスタム

enablePullDownRefresh：ドロップダウンリフレッシュを真のオープン

backgroundTextStyle：光が白にスタイルのロードなので、それは3点の読み込みが表示されません

navigationStyle.wxml

<headernavbar navbar-data="{{nvabarData}}"></headernavbar> 
<view class="home-page"> 
   <text>
    上面是自定义导航栏↑↑↑
   </text> 
   <text>
    下面是主体内容↓↓↓
   </text> 
   <navigator url="./testPage">
    跳转到测试页
   </navigator> 
</view>
复制代码

navigationStyle.js

Page({
    data: {
        // 组件所需的参数
        nvabarData: {
            showCapsule: 1,
            // 是否显示左上角胶囊按钮 1 显示 0 不显示
            title: '组件列表' // 导航栏 中间的标题
        }
    },

    onPullDownRefresh() {
        setTimeout(() = >{
            wx.stopPullDownRefresh(); // 停止下拉
        },
        2000);
    },

})
复制代码

注意：やっアプレット開発ツールは、すべての権利を見えますが、ナビゲーションバーの高さは、試験後も64pxである。しかし、実際のマシンで取得し、そこiphone8の偏差はプラス高さが60PXです。

このマップは明らかに違い、いくつかのピクセルを見ることができますだけではカスタムナビゲーションを使用して、いくつかのページである場合には、慎重なユーザーが気づくかもしれないが、実質的に影響しません。カスタムグローバルナビゲーションを使用している場合、それはこの問題はありません。

商品コード：HTTPS：//github.com/Shay0921/header-navbar.git

ます。https：//juejin.im/post/5d0219536fb9a07ef06f8eabで再現