微信小程序_自定义导航

栏目: IOS · 发布时间: 6年前

内容简介:微信客户端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. 我想学的细一点,路才走的广一点~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C#图解教程

C#图解教程

索利斯 / 苏林、朱晔 / 人民邮电出版社 / 2009-1 / 65.00元

本书是一本广受赞誉的C# 教程。它以图文并茂的形式,用朴实简洁的文字,并辅之以大量表格和代码示例,精炼而全面地阐述了最新版C# 语言的各种特性,使读者能够快速理解、学习和使用C#。同时, 本书还讲解了C#与VB 、C++ 等主流语言的不同点和相似之处。 本书是一本经典的C# 入门书,不仅适合没有任何编程语言基础的初级读者,而且还是有VB 、C++ 等语言基础的C# 初学者的最佳选择。一起来看看 《C#图解教程》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

SHA 加密
SHA 加密

SHA 加密工具