效果

取消原生导航栏

"pages": [
  {
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "",
      "navigationStyle": "custom" // 取消顶部
    }
  }
],

使用background属性

<template>
  <scroll-view class="org-container" scroll-y enhanced :show-scrollbar="false">
    <!-- 如果样式设置在全局，不需要背景的不使用class="com-container" -->
    <view class="com-container">
      <up-navbar title="个人中心" :placeholder="true" :autoBack="true">
      </up-navbar>
      <view class="" v-for="i of 100">
        <view class="test">测试{{i}}</view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
</script>

<style lang="scss">
  // 取消滚动条
  .org-container {
    height: 100vh;
    overflow: auto;
  }

  $container-bg-url: 'https://tombstone.oss-cn-chengdu.aliyuncs.com/app/common_bg_1.png';

  .com-container {
    background: url($container-bg-url);
    width: 100%;
    min-height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    box-sizing: border-box;
    padding: 4rpx 32rpx 88rpx 32rpx;

    // 导航栏默认背景替换
    .u-navbar--fixed {
      background: url($container-bg-url);
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;

      .u-navbar__content,
      .u-status-bar {
        background-color: transparent !important;
      }
    }
  }
</style>

不使用图片

也可以使用渐变色替换原来的background

background: linear-gradient(to top right, #f5f5f5 0%, #f5f5f5 30%, rgba(240, 250, 247, 1) 60%, #fff0f5 100%);