uni-app nvue实现沉浸式状态栏（线性渐变色）

发布于 1周前 作者 eggper 来自 Uni-App

uni-app nvue实现沉浸式状态栏（线性渐变色）

搜索列表页面代码示例

模板部分

<template>  
<div class="page-searchList">  
    <div class="header">  
        <div class="statusBar" :style="{height:statusBarHeight+'wx'}"></div> <!-- 状态栏占位 -->  
        <div class="info"><text style="font-size: 16wx;">标题栏</text></div>  
    </div>  
    <div class="content">  
        <text style="font-size: 50wx;">{{statusBarHeight}}wx</text> <!-- 打印状态栏高度 -->  
    </div>  
</div>  
</template>

脚本部分

<script>  
export default {  
    data: {  
        statusBarHeight: ''  
    },  
    created() {  
        let _t = this;  
        setTimeout(() => { //获取状态栏高度，setTimeout后才能调用uni.  
            uni.getSystemInfo({  
                success: function(res) {  
                    _t.statusBarHeight = res.statusBarHeight;  
                    console.log(_t.statusBarHeight);  
                }  
            });  
        }, 1);  
    }  
};  
</script>

样式部分

.page-searchList {  
    background-color: #8f8f94;  
    justify-content: center;  
    align-items: center;  
}  
.header {  
    background-image: linear-gradient(to right, #a80077, #66ff00);  
    width: 750px;  
    position: fixed;  
    top: 0;  
}  
.info {  
    height: 44wx;  
    justify-content: center;  
    align-items: center;  
}

搜索列表页面状态栏高度示例


Harmonyos Next教程
1 回复

在uni-app中使用nvue实现沉浸式状态栏，并设置线性渐变色，可以通过自定义绘制状态栏背景来实现。nvue是uni-app提供的用于原生渲染的Vue.js扩展语法，它允许我们直接操作原生组件和样式。

以下是一个示例代码，展示如何在nvue页面中实现沉浸式状态栏并应用线性渐变色背景：

<template>
  <div>
    <!-- 自定义状态栏容器 -->
    <div class="status-bar" :style="statusBarStyle"></div>
    
    <!-- 页面内容 -->
    <div class="content">
      <!-- 这里放置你的页面内容 -->
      <text>沉浸式状态栏示例</text>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0, // 状态栏高度
      statusBarStyle: {}  // 状态栏样式
    };
  },
  mounted() {
    // 获取系统状态栏高度
    #ifdef APP-PLUS
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    // 设置状态栏样式
    this.statusBarStyle = {
      height: `${this.statusBarHeight}px`,
      backgroundColor: 'transparent', // 透明背景，以便显示渐变
      'background-image': `linear-gradient(to bottom, #ff7e5f, #feb47b)` // 线性渐变
    };
    // 页面内容顶部内边距，避免被状态栏遮挡
    const pageStyle = document.querySelector('.content').style;
    pageStyle.paddingTop = `${this.statusBarHeight}px`;
    #endif
  }
};
</script>

<style scoped>
.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
}

.content {
  position: relative;
  /* 其他样式 */
}
</style>

说明：

  1. 获取状态栏高度：在mounted生命周期钩子中，通过uni.getSystemInfoSync()获取系统信息，其中statusBarHeight为状态栏高度。

  2. 设置状态栏样式：通过绑定style属性，将状态栏高度和背景样式（线性渐变）应用到自定义的状态栏容器上。注意，这里背景色设为transparent，以便显示渐变背景。

  3. 页面内容内边距：为了避免页面内容被状态栏遮挡，给页面内容的顶部添加与状态栏高度相同的内边距。

  4. 条件编译：使用#ifdef APP-PLUS条件编译指令，确保代码仅在App平台生效，因为nvue主要用于App的原生渲染。

以上代码展示了如何在uni-app的nvue页面中实现沉浸式状态栏，并应用线性渐变色背景。你可以根据实际需求调整渐变颜色和页面内容样式。

回到顶部