uniapp设置背景

设置全局背景样式

在App.vue文件中通过CSS设置全局背景样式，适用于所有页面。修改<style>部分添加以下代码：

page {
  background-color: #f5f5f5; /* 浅灰色背景 */
  /* 或使用背景图 */
  background-image: url('/static/bg.png');
  background-size: cover;
}

单页面背景设置

在特定页面的<style>标签中设置当前页面的背景：

.uni-page-body {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
  min-height: 100vh;
}

使用内联样式

在模板中直接通过行内样式设置背景：

<template>
  <view class="content" :style="{background: 'url(/static/bg.jpg) no-repeat fixed'}">
    <!-- 页面内容 -->
  </view>
</template>

动态切换背景

通过绑定样式实现动态背景切换：

export default {
  data() {
    return {
      bgColor: '#ffffff'
    }
  },
  methods: {
    changeBg(color) {
      this.bgColor = color
    }
  }
}

<view :style="{backgroundColor: bgColor}"></view>

注意事项

• 使用本地图片时需将图片放在static目录
• 渐变色背景需测试各平台兼容性
• 背景图过大可能导致加载性能问题
• iOS和Android对背景样式的解析存在细微差异

解决滚动穿透问题

当设置背景后出现滚动异常时，可添加以下样式：

.uni-page-body {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: auto;
}