如何实现全屏小程序及自定义左上角胶囊

Posted 2023-05-16

参考技术A

我们在做一些譬如视频播放等功能的时候，有时候是期望可以全屏展示视频的，微信小程序为我们提供了这样的功能。

我们可以在选择将整个小程序设置为全屏或者只把某个页面设置为全屏。

需要注意的点是

有些时候，我们需要在全屏状态下，自定义一个左上角胶囊或者返回按钮，来实现页面的返回或别的功能。为了美观，我们需要把这个按钮和右上角的胶囊对齐。

从图中我们可以看到，小程序顶部的标题栏，主要包括红色的手机状态栏和绿色的页面标题栏部分。我们需要获取到的是手机状态栏的高度，以及绿色部分的高度，好让我们自己的控件和标题对齐。

PS：小程序在 wx.getSystemInfo 这个方法的[2.7.0]基础库上新增了几个属性，其中有一个如下：

由于我们使用的是2.6的基础库，并不敢升到2.7上去，所以没有办法去试一下，不过大胆猜测一下这几个属性跟这个标题栏高度是不是相关？哈哈哈~

小程序 - 如何自定义导航栏

思路

 

自定义导航栏高度组成：状态栏（绿色部分）、导航栏（蓝色部分）

状态栏

通过调用 wx.getSystemInfoSync 获取

const res = wx.getSystemInfoSync()
this.setData({
   statusBarHeight:res.statusBarHeight
})

导航栏

通过获取右上角胶囊的位置信息计算，navBarPadding为导航栏上下的间隙 

let res = wx.getMenuButtonBoundingClientRect()
let navBarPadding = (res.top - this.data.setStatusBarHeight) * 2 
this.setData({
   navBarHeight: res.height + navBarPadding
})

代码

app.js:

App({
  onLaunch () {
     this.setStatusBarHeight()
     this.setNavBar()
  },
  //设置系统状态栏高度
  setStatusBarHeight(){
      try {
        const res = wx.getSystemInfoSync()
        this.globalData.statusBarHeight = res.statusBarHeight
      }catch(error){
        console.log(error)
      }
  },
  //设置导航栏height
  setNavBar(){
      let res = wx.getMenuButtonBoundingClientRect()
      let navBarPadding = (res.top - this.globalData.statusBarHeight) * 2 
      this.globalData.navBarHeight = res.height + navBarPadding
  }, 
  globalData: {
    statusBarHeight: 20,
    navBarHeight: 44
  }
})

 

wxml:

<view class="top-bar-wrap">
    <view class="top-bar-main" style="padding-top:{{statusBarHeight}}px;height:{{navBarHeight}}px">
        自定义导航栏
    </view>
</view>

wxss:

.top-bar-wrap{
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.top-bar-main{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#fff;
}

js:

const app = getApp()
Component({
  data: {
    statusBarHeight: app.globalData.statusBarHeight,
    navBarHeight: app.globalData.navBarHeight
  }
})

最后

setStatusBarHeight、setNavBar这两个方法最好写到app.js中，获取好放在app.globalData中，这两个高度可能不止自定义导航栏需要用到。

比如使用了自定义导航栏的页面，因为自定义导航栏是fixed定位脱离文档流，导致整个页面就会上移，所以要给页面加上padding-top，高度跟自定义导航栏的高度一致，即 statusBarHeight + navBarHeight。