微信小程序_自定义导航
发布时间:2020-12-14 19:19:12 所属栏目:资源 来源:网络整理
导读:需求 需求 需求(重要的事情说三遍) 什么时候开始支持 微信客户端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({
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 'jiaonang'
style='margin-top:{{custom.top - statusBarHeight}}px; height:{{custom.height}}px'>
</view>
复制代码
let app = getApp();
Page({
data: {
statusBarHeight: app.globalData.statusBarHeight,StatusBar: globalData.StatusBar,0);">CustomBar: CustomBar,custom: custom
}
})
复制代码
.bg {
width: 100%;
height: 50rpx;
background: teal;
}
.jiaonang {
background: red;
}
复制代码
以下是微信小程序模拟器的不同的结果
3、如何适配不同的机型??不同机型的适配一直是前端的最严重的问题,小程序对适配问题提出了rpx的方案。 但是对于自定义导航栏,我们似乎用不到的自定义导航栏! 3、注意客户端? 后记
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |