小程序自定义导航栏样式

最新推荐文章于 2023-09-20 08:50:45 发布

小郭快跑呀！

最新推荐文章于 2023-09-20 08:50:45 发布

阅读量492

点赞数 1

分类专栏：微信小程序

by小郭在此噢

本文链接：https://blog.csdn.net/qq_44847471/article/details/118944014

版权

微信小程序专栏收录该内容

21 篇文章 0 订阅

订阅专栏

动态修改导航栏名称，代码如下：

wx.setNavigationBarTitle({
	 title: 导航栏名称
})

自定义导航栏：
方法一：
在.wxml书写以下代码：只能修改标题，字体颜色、背景等。

<page-meta>
  <navigation-bar
    title="标题"
    front-color="#fff"
    background-color="#4A87F7"
  />
</page-meta>

方法二：
设置消除默认导航栏，完全自定义
1、在.json文件中的windows下设置以下代码：

"windows":{
  "navigationStyle":"custom"
}

2、在页面加载后使用 wx.getSystemInfo 来获取状态栏的高度以及判断右上角按钮是返回还是主页。

 onLoad: function (options) {
    wx.getSystemInfo({
      success: (result) => {
        var statusBarHeight = result.statusBarHeight
        console.log(statusBarHeight)
      },
    })
    if (options.isback) {              // options.isback 是从跳转到这个页面的上个页面传过来的，如果没有就表示这是首页
      this.setData({
          isback: true
      })
  }
  },

3、在wxml中自定义导航栏样式代码如下：

 <view class="statusBarBox">
    <view  style="height:{{statusBar + 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">导航栏标题</text>
    </view>
  </view>