【uni-app&小程序】状态栏和标题栏

转载请注明：【uni-app】状态栏和标题栏_joanmelon的博客-CSDN博客_uniapp 标题栏

uni-app

状态栏

手机屏幕最顶部的区域，包括：信号、运营商、电量等信息。

APP都有自己的色调风格，为了达到整体视觉美观，通常会设置状态栏和标题栏的色调一致。

设计风格：

• 默认

• 变色（设置颜色）

• 透明（沉浸式）

• 消失（全屏）

状态栏文字颜色

onReady() {
    plus.navigator.setStatusBarStyle('dark');   // light（白色）、dark（黑色）
}

是否全屏（关闭状态栏）

// 关闭
plus.navigator.setFullscreen(true); 

// 打开
plus.navigator.setFullscreen(false); 

// 查询应用当前是否全屏显示！
console.log( "是否全屏："+(plus.navigator.isFullscreen()?"是":"否") );

标题栏

左侧返回按钮

onBackPress左侧返回事件参见生命周期函数。

动态显示隐藏返回按钮

HTML5+ API Reference

// 当前webview
let pages = getCurrentPages()
let page = pages[pages.length - 1];
let currentWebview = page.$getAppWebview();
/ 当前标题栏
let titleNView = currentWebview.getStyle().titleNView
console.log(titleNView)
//打印结果
{
        "autoBackButton": true,
        "backgroundColor": "#F8F8F8",
        "dock": "top",
        "height": 44,
        "position": "dock",
        "statusbar": {},
        "tags": [],
        "titleColor": "#000000",
        "titleText": "纸板入库",
        "type": "default"
}
titleNView.autoBackButton = false
currentWebview.setStyle({
    titleNView:titleNView
})    

中间标题

uni.setNavigationBarTitle(OBJECT) | uni-app官网

uni.setNavigationBarTitle({
    title: '标题'
})

右侧按钮为字体图标

// page.json
{
    "path": "pages/index/index",
    "style": {
        "enablePullDownRefresh":true, // 下拉刷新
        "bounce":"none", //关闭反弹效果
        "scrollIndicator":"none", //隐藏滚动条
        "navigationBarTitleText": "中间标题", 
        "app-plus":{
            "titleNView": false ,// 禁用 原生标题栏
            "titleNView":{
                // 返回按钮
                "autoBackButton":false,
                // 搜索框配置
                "searchInput":{
                     "align":"left",
                     "backgroundColor":"#F7F7F7",
                     "borderRadius":"4px",
                     "placeholder":"搜索糗事",
                     "placeholderColor":"#CCCCCC",
                     "disabled":false
                },
                // 配置右侧按钮
                "buttons": [
                    { 
                        "text": "返回登陆",
                        "fontSize": "18rpx",
                        "color":"#000000",                                 
                        "colorPressed":"#BBBBBB",
                        "float":"right",
                    }
                ],
                "buttons":[
                    {    
                        "text":"\ue534",                                  
                        "fontSrc":"/static/uni.ttf",
                        "fontSize":"22px",
                        "redDot":true, //红点
                        "badgeText":"12", // 红色12角标
                        "color": "#FFFFFF",
                        "width":"50px"
                    }
                ]
            }
        }
    }
}

动态改变右侧按钮文字

// 状态栏右侧按钮被点击
onNavigationBarButtonTap(e) {   //监听导航栏按钮点击
    if (e.index === 0) {  
        if (e.text === "编辑") { 
            var currentWebview = this.$mp.page.$getAppWebview();  
            currentWebview.setTitleNViewButtonStyle(0, {  text: "完成"  });  

        } else {  
            var currentWebview = this.$mp.page.$getAppWebview();  
            currentWebview.setTitleNViewButtonStyle(0, {  text: "编辑"  });  
        }  
    }  
}

小程序

标题栏

隐藏左侧小房子

 

onShow () {
    wx.hideHomeButton()
}

动态标题栏文字

使用的API是 wx.setNavigationBarTitle

这里实现的功能是首页产品列表跳转到详情，标题栏展示商品名称。

 首页

pages/home/index?name=牙刷

详情页

onLoad: function (options) {
    
  wx.setNavigationBarTitle({
    title: options.name
  })

  this.getList()
},

隐藏标题栏

custom 模式可自定义导航栏，只保留右上角胶囊状的按钮)。

index.json

{
  "navigationStyle": "custom"
}

自定义标题栏背景图片

index.json

{
  "navigationStyle": "custom"
}

index.html

<view class="bg"></view>

index.wxss 

.bg {
    height: 200rpx;
    width: 100%;
    background: red;
}

自定义标题栏

初步设想是想用vantweap中的navbar效果来做的，但是标题栏不完整，样式也不好设。

NavBar 导航栏 - Vant Weapp

最后利用动态获取标题栏和状态栏的高度来设置。

wx.getSystemInfo() 获取标题栏信息

wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息

最后实现： 

padding-top：状态栏的高度statusHeight

height：就是状态栏和标题栏的高度navBarHeight + statusHeight

<view 
    class="nav" 
    style="padding-top:{{statusHeight}}px; height:{{navBarHeight + statusHeight}}px;"
>
  <van-icon name="arrow-left" size="25" color="#fff" bindtap="back"/>
</view>

onLoad() {
  let res = wx.getSystemInfoSync();
  let statusHeight = res.statusBarHeight;
  let buttonInfo = wx.getMenuButtonBoundingClientRect()
  let navBarHeight = (buttonInfo.top - res.statusBarHeight) * 2 + buttonInfo.height
  
  this.setData({
    statusHeight,
    navBarHeight
  })
},

back() {
  wx.navigateBack({
    delta: 1
  });
},