小程序自定义标题栏（自适应）

首先展示一下自己写的标题栏

这标题栏具有高度的自适应性。

实现

首先找到你需要用到自定义的标题栏页面的json文件
添加上标题栏自定义的属性，

"navigationStyle": "custom"

这样之后，你的页面内容就会往上移，直接将原来标题栏的位置覆盖掉。
之后再添加你自己想要设计的标题栏。
wxml文件

<!-- 自定义的导航栏 -->
<view class="custom" style="height: {{height}}px; top: 0;"><view style="margin-top: {{statusBarHeight}} px;"></view>
</view>

js文件

    //获取导航栏高度let res = wx.getSystemInfoSync(); //不懂得可以去官方api查找let titleH;   //这是除去状态来的高度let statusBarHeight = res['statusBarHeight'];    //状态栏的高度if (res && res['system']) {// 判断是否是安卓操作系统 // 一般标题栏苹果是44px,安卓的是48pxif (res['system'].indexOf('Android') > 0) {titleH = 48} else {titleH = 44}var height = titleH + statusBarHeight;this.setData({height: height,statusBarHeight: statusBarHeight})}

wxss文件

.custom{position: fixed;margin: 0;padding: 0;background-color: #fff;width: 100%;
}

之后就可以自适应所有手机的标题栏。

小程序自定义标题栏（自适应）相关推荐

swiper高度自适应_小程序自定义导航自适应高度
小程序导航条自定义,高度自适应iphoneX等刘海手机和其他手机,开启导航自定义需要在app.json文件里将window的 navigationStyle属性设置为: custom,开启导航自定义可 ...
微信小程序自定义标题栏（搜索框）
(小白学习笔记) 1.首先在需要更改页面的json文件中加入"navigationStyle":"custom" 与"usingComponents& ...
小程序导航栏透明，精准设置小程序自定义标题的高度和定位
这里写自定义目录标题场景设置页面标题栏为自定义模式一些概念 - 重点解决方案详细代码 util.js 主页面自定义标题栏组件场景常见场景为ui小姐姐为页面顶部设计了漂亮的图片例如我们的 ...
小程序富文本自适应屏幕_自适应文本：跨屏幕尺寸构建可读文本
小程序富文本自适应屏幕 Many of you may already know about responsive web design. Cited from Wikipedia, respons ...
记一次小程序自定义导航栏及加载动画的解决方案
记一次小程序自定义导航栏及加载动画的解决方案主要逻辑就是动态获取设备的 statusBarHeight 和 titleBarHeight,来设置导航栏的高度和 paddingTop ip6 ipx ...
taro 请务必在小程序页面中完善页面基础信息_小程序自定义导航栏（完美适配所有手机）...
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
小程序自定义导航栏（完美适配所有手机）解决上下不居中左右不对齐高度不协调问题...
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中页面的 title 只支持纯文本级别的样式控 ...

小程序自定义标题栏（自适应）

实现

小程序自定义标题栏（自适应）相关推荐

最新文章

热门文章