ウィジェットのナビゲーションバーのカスタマイズとアニメーションのロードのソリューションをメモします.

ナビゲーションバーのカスタマイズとアニメーションのロードのソリューションについて説明します.
主なロジックは、ナビゲーションバーの高さとpaddingTopを設定するために、デバイスのstatusBarHeightとtitleBarHeightを動的に取得することです.
ip6
ipx
loading
ナビゲーションバーはコンポーネントで、カスタムコンポーネントはpropertiesでpropパラメータを取得します.コンポーネントはstatusBarHeight、titleBarHeight、navigatorHeight(実際には使用されていません)の3つのdataを維持する必要があります.
この3つのdata変数は、ウィジェットreadyのライフサイクル中にsetBarHeightを呼び出すことによって動的に取得されます.

Component({
    properties: {
        title: {
            type: String,
            default: 'default title'
        },
        ifShowBtn: {
            type: Boolean,
            default: true
        }
    },
    data: {
        statusBarHeight: 0,
        titleBarHeight: 0,
        navigatorHeight: 0
    },
    ready: function () {
        this.setBarHeight()
    },

コンポーネントには、ステータスバーとタイトルバーの高さを設定するsetBarHeight、ステータスバーとタイトルバーの高さを動的に取得するgetBarHeight、IOSシステムかどうかを判断する3つの方法があります.
IOSシステムかどうかを判断してtitleBarHeight、iPhoneやiPadのこの値を44、アンドロイドの統一設定を48とすればよい

methods: {
        //            
        setBarHeight: function () {
            this.isIOS().then(this.getBarHeight).then(res => {
                this.setData({
                    statusBarHeight: res.statusBarHeight,
                    titleBarHeight: res.titleBarHeight,
                    navigatorHeight: res.navigatorHeight
                })
            })
        },
        //                
        getBarHeight: function (isIOS) {
            return new Promise((resolve, reject) => {
                wx.getSystemInfo.call(this, {
                    success: res => {
                        let statusBarHeight = res.statusBarHeight
                        let titleBarHeight = isIOS ? 44 : 48
                        resolve({ statusBarHeight, titleBarHeight, navigatorHeight: statusBarHeight + titleBarHeight })
                    },
                    failure: res => {
                        reject('error getting systeminfo')
                    }
                })
            })
        },
        //       IOS   
        isIOS: function () {
            return new Promise((resolve, reject) => {
                wx.getSystemInfo.call(this, {
                    success: res => {
                        if (res.model.indexOf('iPhone') > -1 || res.system.indexOf('iOS') > -1) {
                            resolve(true)
                        } else {
                            resolve(false)
                        }
                    },
                    failure: res => {
                        reject('error getting systeminfo')
                    }
                })
            })
        }

また、これらの変数を取得した後にappのglobalDataオブジェクトに格納することができ、毎回このオブジェクトから変数を取得するだけでよい
次にwxmlを記述します.

    
        
            B
            H
        
        {{title}}
    
    loading...

カスタムナビゲーションバーの高さはtitleBarHeight、paddingTopの値はstatusBarHeightです
カスタムナビゲーションバーはfixed要素なので、このclassはheaderのview要素に次のようにスタイルを設定します.

.header {
    display: flex;
    align-items: center;
    position: fixed; /* fixed     wxml            height   paddingTop */
    top: 0;
    background: #fff;
    width: 100%;
    z-index: 9999;
}

header-titleは絶対的に位置する要素で、スタイルを設定して中央に配置する必要があります.

.header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

最後にpullDownRefreshのロードアニメーションの問題を解決する必要があります.この問題を修復しないと大きな空白が発生します.
まずappを設定必要がある.json

backgroundTextStyleはlight

navigationBarTextStyleはblack

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationStyle": "custom",
    "enablePullDownRefresh": true,
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black"
  }
}

次に、コンポーネントwxmlのclassをloadingの要素に追加します.これがカスタムロードアニメーションです.
次にスタイルを追加します.

.loading {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

flexレイアウトを中央に配置すればよい
最後にnavigatorを設定します.jsonはモジュールをコンポーネントとして定義する

{
    "component": true
}

ページで使用:
プロファイルの変更:

{
  "usingComponents": {
    "navigator": "../../components/navigator/navigator"
  }
}

wxmlファイルを変更するには:

参照先:

https://www.w3xue.com/exp/art...

https://juejin.im/post/5b7d5f...