微信小程序自定义顶部导航栏样式
发表于:2022-09-30 09:57:40浏览:1743次
navigationBar相信大家都不陌生把?今天我们就来说说自定义navigationBar,把它改变成我们想要的样子。
思路:隐藏原生样式,获取胶囊按钮、状态栏相关数据以供后续计算,根据不同机型计算出该机型的导航栏高度,进行适配
编写新的导航栏,引用到页面。
1、自定义导航栏navigation-bar
标签
<page-meta>
<navigation-bar
title="勾股OA"
font-color="#fff"
background-color="#4A87F7"
/>
</page-meta>
2、动态修改导航栏名称
wx.setNavigationBarTitle({
title: '勾股OA'
})
3、隐藏原生的navigationBar,自定义导航,需要设置头部导航栏的页面中通过json配置 “navigationStyle”: “custom” ,自定义导航栏,只保留右上角的胶囊按钮。
index.json文件:
"windows":{
"navigationStyle": "custom"
}
index.js文件:
Page({
data: {
statusBarHeight: 0,
isBack: false
},
onLoad(ops) {
wx.getSystemInfo({
success: (result) => {
this.setData({statusBarHeight: result.statusBarHeight})
}
})
if(ops.isBack) {
this.setData({isBack})
}
})
})
index.wxml文件:
<view class="statusBarBox">
<view style="height:{{statusBarHeight + 44}}px;">
<navigator class="back" open-type="navigateBack" wx:if="{{isback}}"></navigator>
<navigator class="home" open-type="reLaunch" url="/pages/index/index" wx:else>
<image class="image" mode="aspectFill" src=""></image>
</navigator>
<text class="title">勾股OA</text>
</view>
</view>
注意一下:导航栏高度一般都是状态栏的高度+44
推荐文章
- TinyMCE是一个轻量、简洁、功能强大的富文本编辑器
- PHP中的word文档生成与处理库PHPWord的基本使用
- 支付宝已支持给微信QQ好友转账 微信支付宝互通何时能实现?
- ThinkPHP6接入阿里云短信实战:阿里云短信验证码登录
- linux环境下,Composer安装项目时报错:Do not run Composer as root/super user!
- 前端开发者必须掌握的数据可视化技术
- CSS @media print控制浏览器web打印样式
- 不知道是什么时候起,直播行业也开始内卷了
- Thinkphp6中where条件中一个表两个字段比较条件的写法
- axios获取后端返回的二进制验证码图片或者图片对象