小程序自定義導航欄

微信提供自定義導航欄說明
開始自定義導航欄組件

微信提供自定義導航欄說明

微信版本 6.60
window下的 navigationStyle 屬性，設置為 custom 即可關閉原生頭部導航，但會保留橢圓形菜單。
Tip 暫時不支持單頁面設置 navigationStyle 屬性

開始自定義導航欄

了解規則

iPhone X ： 導航欄高度 44 、 狀態欄高度 44 、tabBar高度 83

其他機型 ： 導航欄高度 44 、 狀態欄高度 20 、 tabBar高度 49

自定義組件

app.wxss 添加page屬性

 1 page {
 2   position: absolute;
 3   top: 0;
 4   bottom: 0;
 5   height: 100%;
 6   background-color: #f8f8f8;
 7   font-size: 32rpx;
 8   color: #333;
 9   display: flex;
10   flex-direction: column;
11 }

頁面使用2層流式布局　　

1 <view >
2     <view class='navigation'></view>
3     <view class='container'></view>
4 </view>

container使用布局 flex:1這個一定要加上

.container{
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

navigation組件
1.js

 1 setNavigation(){  
 2     let startBarHeight = 20
 3     let navgationHeight = 44
 4     let that = this
 5     wx.getSystemInfo({
 6       success: function (res) {
 7         console.log(res.model)
 8         if (res.model == 'iPhone X'){
 9           startBarHeight = 44
10         }
11         that.setData({
12           startBarHeight: startBarHeight,
13           navgationHeight: navgationHeight
14         })
15       }
16     })
17   },

2.wxml

1     <view class='navigation'>
2       <view class='startBar' style='height:{{startBarHeight}}px'></view>
3       <view class='navgation' style='height:{{navgationHeight}}px'></view>
4     </view>

最后封裝成組件即可

寫在最后

感覺這個玩意還是官方給的香，如果現在項目用起來就自己封裝一個用吧。
期待出單頁面設置navigationStyle

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 微信小程序用navigationStyle自定義導航欄做法 Taro 小程序自定義導航欄微信小程序自定義導航欄小程序自定義頭部導航欄小程序自定義頭部導航欄實現小程序插件自定義導航欄 uniapp自定義小程序頂部導航欄及其適配微信小程序自定義導航欄微信小程序自定義導航欄配置（頂部欄搜索框）微信小程序自定義底部導航欄組件+跳轉