开始

image.png
新建页面
image.png

image.png

页面配置

取消原生导航栏， 并且取消回弹
image.png

  1.     "app-plus": {
  2.                     "titleNView": false,
  3.                     "bounce": "none"
  4.                 }

滚动条关闭
image.png

  1. "app-plus": {
  2.                     "titleNView": false,
  3.                     "bounce": "none",
  4.                     "scrollIndicator": "none"
  5.                 }

image.png
增加点击事件
image.png

  1. <view class="u-f-ajc" @tap="openLogin">
  2.                 账号密码登陆<view class="icon iconfont icon-jinru"></view>
  3.             </view>

image.png

  1. methods: {
  2.             openLogin(){
  3.                 uni.navigateTo({
  4.                     url:'../login/login'
  5.                 })
  6.             }
  7.         }

image.png

引入状态条组件

image.png

image.png

  1. <view>
  2.         <!-- 状态栏 -->
  3.         <uni-status-bar></uni-status-bar>
  4.         登陆
  5.     </view>

image.png

我们需要的是黄色的背景的状态条
image.png

修改组件

image.png

  1. :style="{ height: statusBarHeight, background:bgcolor }"

传入的参数加一个默认值
image.png

  1. props:{
  2.             bgcolor:{
  3.                 type: String,
  4.                 default: ''
  5.             }            
  6.         },

吸取颜色
image.png

image.png

导航栏变成了黄色 的
image.png

2022最新用法

首先看官方的文档，已经没有单独的组件nav-status-bar了。 都包含在了uni-nav-bar里面了。
https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html#%E7%A4%BA%E4%BE%8B
看到官方的第一个例子 ，就是换背景色的 我们直接把代码复制过来。改一改
image.png

  1.     <uni-nav-bar background-color="#FFE933" status-bar  />

背景色+status-bar这样直接 使用。
image.png
H5端的效果
image.png
手机上的效果
image.png

先来切图

选中旁边这个位置。
image.png
atrl+alt 拖动鼠标，把差号给盖住了。
image.png

image.png
然后把这一块切出来。
image.png

结束