小程序自定义导航栏（适配不同手机）—

基本思路

 写自定义导航组件的时候，需要将组件结构一分为二：状态栏 + 标题栏状态栏高度可通过wx.getSystemInfoSync().statusBarHeight获取标题栏高度：安卓：48px，iOS：44px单位必需跟胶囊按钮一致，用px

详细介绍请看：小程序自定义导航栏适配（完美版）这里就不详细介绍了

获得版本号和状态栏高度（app.wpy）

 globalData={statusBarHeight:0,toBar:44} onLaunch() {let _that=this;wx.getSystemInfo({success (res) {_that.globalData.statusBarHeight=res.statusBarHeight;if(res.platform=="ios"){_that.globalData.toBar=44;}else if(res.platform=="android"){_that.globalData.toBar=48;}else{_that.globalData.toBar=44;}}})}

配置页面自定义

config = {navigationBarTitleText: 'test',navigationStyle: 'custom',usingComponents: {'van-icon': '/components/vant/icon/index'}};

在页面中使获取高度

data = {statusBarHeight:20,toBarHeight:44
}onLoad() {this.statusBarHeight=this.$parent.globalData.statusBarHeight;this.toBarHeight=this.$parent.globalData.toBar;
}

html布局

<view class="ch_top"><view style="height: {{statusBarHeight}}px;"></view><view class="tobar" style="height: {{toBarHeight}}px;"><view class="title" style="height: {{toBarHeight}}px;line-height: {{toBarHeight}}px;"><text>搜索</text></view><view class="back" @tap="onClickBack"><van-icon custom-class="left_custom_class" custom-style="line-height: {{toBarHeight}}px;"  name="arrow-left"/></view></view></view>

css样式

  .ch_top {background-color: #ffdd00;.tobar{position:relative;.back {position: absolute;left: 0;top: 0;bottom: 0;padding-left: 15rpx;padding-right: 15rpx;.left_custom_class {font-weight: 700;height: 100%;font-size: 36rpx;}}.title {text-align: center;font-weight: 700;font-size: 36rpx;}}}

效果

完成…

小程序自定义导航栏（适配不同手机）——拿来就用相关推荐

小程序自定义导航栏适配
小程序自定义导航栏适配(完美版) 1.发现问题小程序页面自定义导航栏功能已经开放有些日子了(还不知道这个功能的可以先>>了解一下),这极大的提升了小程序开发的自由度,相信不少小伙伴已经使 ...
小程序自定义导航（适配所有手机包括刘海屏），iPhone8以上机型的底部横条遮挡问题
** 自定义顶部导航 ** 备注:无法实现顶部导航的安卓靠左,IOS居中的现象 1. 隐藏小程序自带的顶部导航在页面的json或app.json中添加(隐藏顶部导航): "navigati ...
taro 请务必在小程序页面中完善页面基础信息_小程序自定义导航栏（完美适配所有手机）...
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
小程序自定义导航栏（完美适配所有手机）解决上下不居中左右不对齐高度不协调问题...
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中页面的 title 只支持纯文本级别的样式控 ...
微信小程序自定义导航栏胶囊菜单按钮高度完美适配原理简单赛过一些大厂的适配妈妈再也不用担心我强迫症啦
在自定义小程序导航栏时,右上角的胶囊(MenuButton)在不同机型测试,会发现很难适配. 实测中不同的手机,胶囊高度不一样.状态栏高度不一样.与模拟器显示的情况是不一样的. 完全需要根据手机,动 ...
记一次小程序自定义导航栏及加载动画的解决方案
记一次小程序自定义导航栏及加载动画的解决方案主要逻辑就是动态获取设备的 statusBarHeight 和 titleBarHeight,来设置导航栏的高度和 paddingTop ip6 ipx ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...

小程序自定义导航栏（适配不同手机）——拿来就用

小程序自定义导航栏（适配不同手机）——拿来就用相关推荐

最新文章

热门文章