微信小程序_自定义导航

栏目: 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. 我想学的细一点,路才走的广一点~

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

查看所有标签

猜你喜欢:

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

Java 语言导学

Java 语言导学

Mary Campione Kalrath Alison Huml / 机械工业 / 2003-1 / 39.00元

《Java 语言导学(原书第3版)》既适合初学者,也适合有经验的程序员:新程序员通过从头到尾阅读《Java 语言导学(原书第3版)》可以得到最大的收获,包括按照第1章“起步”中的步骤说明编译和运行自己的第一个程序。有过程式语言(比如C)经验的程序员可能希望从Java编程语言的面向对象概念和特性开始学习。 有面向对象编程经验的程序员可能希望先学习更高级的内容。一起来看看 《Java 语言导学》 这本书的介绍吧!

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具