<script type="text/javascript">
  document.addEventListener('plusready', function(){
    //是否支持沉浸式状态栏
    alert(plus.navigator.isImmersedStatusbar());
    
  });
</script>

    "statusbar": {
      "immersed": true
    },  

<script type="text/javascript">
  document.addEventListener('plusready', function(){
    //参数：true - 全屏;false - 不全屏
    plus.navigator.setFullscreen(true);
    
  });
</script>

//设置系统状态栏背景色
plus.navigator.setStatusBarBackground('#6495ED');

filter: blur(16px);

  <script src="/UploadFiles/2021-04-02/mui.min.js">

2.2HTML代码
下面HTML代码为使用的mui框架部分和上述状态栏相关部分，这块mui是关于区域轮播部分
顶部img是背景图，外层包裹的div非常有必要，overflow属性要活用，才能有完美的效果。
因为APP的header部分用的定位，所以页面主体部分要加高度为74px左右的padding-top


  <div class="mui-slider">
       <div class="mui-slider-group">
         <div class="mui-slider-item">
          第一个轮播区域
         </div>
         <div class="mui-slider-item">
          <p class="singer">
            <span class="ce"></span>
            <span class="mui-text-center">G-DRAGON</span>
            <span class="ce"></span>
          </p>
          <p class="yinxiao">
            <img src="/UploadFiles/2021-04-02/player_btn_sq_hlight.png">

主要css代码：


*{
  padding: 0px;
  margin: 0px;
}
body{
  overflow: hidden;
  height: 100vh;
}
#background{
  overflow: hidden;
  text-align: right;
}
#background #backImg{
  margin-left: -120px;
  height: 99vh;
  filter: blur(16px);
}
.mui-bar-nav{
  top: 30px;
  background-color: rgba(0,0,0,0);
  box-shadow: 0 0px 0px #ccc;
}
.mui-bar-nav .mui-title{
  color: white;
  font-size: 20px;
  font-weight: normal;
  line-height: 50px;
}
#continer{
  width: 100%;
  height: 100vh;
  position: relative;
  top: -100vh;
  z-index: 5;
  padding-top: 80px;
  background-color: rgba(0,0,0,0.7);
  text-align: center;
  color: white;
}



后面不一样大小的图片居中对齐这一点还一时没想起来。这里就要用到弹性布局的交叉轴对齐方式：


#continer .footer1{
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}


显示下效果：


小q有话说
博主写博客也是想提高自己，还请大神指教。
另外，框架确实好用，但是博主觉得，还是得把原生代码先掌握好。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。