在微信小程序中我们会经常看到不同字样的顶部标题,这样的样式有的是一样的,而有的却又是不同的导航栏,这是怎么回事呢,在这里我们就探讨一下。(微信小程序json文件不能有注释,复制过去的时候有注释记得自行删除,希望能帮到大家,喜欢的给个赞,感谢)
一、使用微信小程序的默认导航栏
1、在app.json中进行如下配置则能够实现全局的顶栏
"window":{"navigationBarBackgroundColor": "#333",//设置顶栏背景颜色"navigationBarTextStyle": "black",//导航栏标题颜色,仅支持black/white"navigationBarTitleText": "首页测试",//设置顶栏文字"backgroundColor": "#eeeeee",//窗口的背景色"backgroundTextStyle": "light",//下拉 loading 的样式,仅支持 dark / light}
2、而如果想要子页面的顶栏文字不同,则在相应的json文件里添加
{"navigationBarTitleText":"光与影"}
结果截图:
二、使用自定义的导航栏
1、首先需要把默认的导航栏隐藏起来,在app.json文件中设置
"window":{"navigationStyle": "custom"},
2、需要app.js里全局设置获取不同手机的状态栏,注意要先定义一个全局变量navHeight,这样就能把获取到的状态栏高度变成一个全局变量。
//app.jsApp({onLaunch: function () {wx.getSystemInfo({success: res => {//导航高度this.globalData.navHeight = res.statusBarHeight + 46;}, fail(err) {console.log(err);}})},globalData: {userInfo: null,navHeight: 0}})
3、在子页面中拿会拿到全局变量navHeight
const App = getApp();Page({onLoad: function (options) {this.setData({navH: App.globalData.navHeight})},})
4、把拿到的数据显示
<view><view class='nav bg-white' style='height:{{navH}}px'><view class='nav-title'>首页<image src='../../img/back.png' mode='aspectFit' class='back' bindtap='navBack'></image><image src='../../img/home.png' mode='aspectFit' class='back1' bindtap='navBack'></image></view></view><scroll-view class='bg-gray overflow' style='height:calc(100vh - {{navH}}px)' scroll-y><view class='hidden'>我是首页</view></scroll-view></view>
结果截图:
三、把自定义导航栏封装成组件
之前只是简单的实现自定义导航栏,要自定义导航栏,那么一般都会有很多地方用到,每个地方都复制就不是很友好,最好是能够把它封装成一个组件。
1、目录结构如下:
2、把之前的页面照搬过来
<!-- navBar-wxml --><view><view class='nav bg-white' style='height:{{navH}}px'><view class='nav-title'>首页<view wx:if="{{navData.show}}" ><image src='../../img/back.png' mode='aspectFit' class='back' bindtap='navBack'></image> <image src='../../img/home.png' mode='aspectFit' class='back1' bindtap='navBack'></image> </view></view></view></view>
3、Js文件需要做一下修改,之前首页也有返回图标,现在把图标隐藏,去到子页面的时候再显示
const app = getApp();Component({properties: {//类似于vue的props用来进行父子组件之间的传值navData:{ //自定义属性用于服级组件传值过来type: Object,value: ['']}},data: {navH: app.globalData.navHeight //把从全局拿到的手机状态栏高度赋值给页面自定义的高度},methods: {}})
4、主要把子页面的引用展示一下,首页更简单,也是一样,所以就不赘述首页代码了
(1)在json文件引入组件
{"usingComponents": {"navBar": "../../components/navBar"}}
(2)在js文件,定义需要传到子组件的数据
//logs.jsPage({data: {navData: {//传给子组件的数据,用来控制图标的显示show:true}},})
(3)页面显示
<view><navBar navData="{{navData}}" /><scroll-view class='bg-gray overflow' style='height:calc(100vh - {{navH}}px)' scroll-y><view class='hidden'>我是子页面</view></scroll-view></view>
结果截图: