用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序_自定义导航

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 支持全屏显示小程序 详情

目前支持全局的配置和单个页面的配置两种:

"navigationStyle": "custom"
复制代码

2、如何实现与官方一样效果导航条,以及如何扩展?

  • 手机顶部信息栏的高度
  • 微信小程序胶囊位置信息

微信小程序提供的API

  • wx.getSystemInfo() 异步获取系统信息
  • wx.getSystemInfoSync() 同步获取用户信息
  • wx.getMenuButtonBoundingClientRect() 小程序胶囊的位置新信息

注意我们能够拿到的数值单位是 px 不是 rpx 。【之后我也写一篇专门探究小程序单位】

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空间
收藏
原作者: 刻舟求剑 来自: 掘金