用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

湖人vs马刺录像:微信小程序_自定義導航

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-5-20 00:31

需求需求需求(重要的事情說三遍)什么時候開始支持微信客戶端7.0.0 - 新增 框架 支持頁面級自定義導航配置 navigationStyle: custom?;“姹究?v1.9.5 (2018.01.24), 新增 配置 window.navigationStyle 支持全屏 ...

  • 需求
  • 需求
  • 需求(重要的事情說三遍)

什么時候開始支持

微信客戶端7.0.0 - 新增 框架 支持頁面級自定義導航配置 navigationStyle: custom。

基礎版本庫 v1.9.5 (2018.01.24), 新增 配置 window.navigationStyle 支持全屏顯示湖人vs爵士季后赛 詳情

目前支持全局的配置和單個頁面的配置兩種:

"navigationStyle": "custom"
復制代碼

2、如何實現與官方一樣效果導航條,以及如何擴展?

  • 手機頂部信息欄的高度
  • 微信小程序膠囊位置信息

微信小程序提供的API

  • wx.getSystemInfo() 異步獲取系統信息
  • wx.getSystemInfoSync() 同步獲取用戶信息
  • wx.getMenuButtonBoundingClientRect() 小程序膠囊的位置新信息

注意我們能夠拿到的數值單位是 px 不是 rpx ?!局笪乙殘匆黃盤驕啃〕絳虻ノ弧?/p>

wx.getSystemInfo({
    success: (res) => {
     // iphone6.statusBarHeight = 20
     this.globalData.statusBarHeight = res.statusBarHeight; 
     let custom = wx.getMenuButtonBoundingClientRect();
     this.globalData.custom = wx.getMenuButtonBoundingClientRect();
     this.globalData.Custom = custom;
     this.globalData.CustomBar = custom.bottom + custom.top - res.statusBarHeight;
     // 另一種計算方式
     this.globalData.CustomBar =custom.height + ( custom.top - res.statusBarHeight) * 2;
    }
})
復制代碼

let custom = wx.getMenuButtonBoundingClientRect();
復制代碼

代碼演示

我們用iphoneX的模擬器為例子,因為iphoneX的信息導航欄比較高與別的不同,我們從特殊的更加明顯。

<view class="bg" style="height:{{statusBarHeight}}px"></view>
<view class='jiaonang' 
      style='margin-top:{{custom.top - statusBarHeight}}px; height:{{custom.height}}px'>
</view>
復制代碼
let app = getApp();
Page({
    data: {
        statusBarHeight: app.globalData.statusBarHeight,
        StatusBar: app.globalData.StatusBar,
        CustomBar: app.globalData.CustomBar,
        custom: app.globalData.custom
    }
})
復制代碼
.bg {
  width: 100%;
  height: 50rpx;
  background: teal;
}

.jiaonang {
  width: 100%;
  background: red;
}
復制代碼

以下是微信小程序模擬器的不同的結果

  • iphoneX 的效果

  • iphone6 的效果

  • 安卓Nexus5x 的效果

  • 平板iPad Air 2 的效果

  • ipad Pro 12.9-inch 的效果

3、如何適配不同的機型??

不同機型的適配一直是前端的最嚴重的問題,小程序對適配問題提出了rpx的方案。 但是對于自定義導航欄,我們似乎用不到的自定義導航欄!

3、注意

客戶端 6.7.2 版本開始, navigationStyle: custom 對 <web-view> 組件無效。

后記

  1. 其實小程序是特別的適合,沒有開發經驗入門或者轉行前端的同志~
  2. 學會斷點調試,學會排除錯誤,才是正道啊~
  3. 我想學的細一點,路才走的廣一點~
分享至 : QQ空間
收藏
原作者: 刻舟求劍 來自: 掘金