微信小程序自定义顶部导航栏样式
发表于:2022-09-30 09:57:40浏览:1681次
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
推荐文章
- Element-plus,动态添加图标的方式
- 分享十个免费优质音频素材网站
- 开源的 OA 办公系统 —— 勾股 OA3.7.22 新版发布
- ThinkPHP6获取数据库内所有表的表名及表信息
- 微软推出VS Code PowerShell的重大更新 PowerShell 引擎的彻底改造
- 移动端微信、企业微信中使用H5的input file时只能选择手机的图片,不能选择文档文件的解决方案
- ThinkPHP6+JS实现大文件分片上传,切片上传
- Thinkphp6中where条件中一个表两个字段比较条件的写法
- 前端:javascript浅拷贝与深拷贝的区别
- 12个适合开发后台管理系统的前端框架,建议收藏