uniapp设置背景
设置全局背景样式
在 App.vue 文件中通过 CSS 设置全局背景颜色或图片，适用于所有页面：
<style>
page {
background-color: #f5f5f5; /* 背景颜色 */
/* 或使用背景图片 */
/* background-image: url('/static/bg.png'); */
/* background-size: cover; */
}
</style> 单页面背景设置
在特定页面的 <style> 标签中覆盖全局样式，仅对当前页面生效：
<style scoped>
.page-container {
background: linear-gradient(to bottom, #ff9966, #ff5e62);
min-height: 100vh;
}
</style> 在模板中添加对应类名：
<template>
<view class="page-container">
<!-- 页面内容 -->
</view>
</template> 动态修改背景
通过 JavaScript 动态切换背景样式，例如响应事件：
export default {
methods: {
changeBg() {
uni.setStorageSync('pageBg', 'url(/static/new-bg.jpg)');
this.$nextTick(() => {
// 触发页面重新渲染
});
}
}
} 在 CSS 中读取存储的配置：
page {
background-image: var(--dynamic-bg, none);
} 注意事项
- 使用
min-height: 100vh确保背景覆盖整个视窗。 - 背景图片建议放在
/static目录，路径需写绝对路径。 - 动态修改背景时，部分安卓机需强制刷新样式，可调用
uni.pageScrollTo()辅助触发。
渐变色背景示例
.background-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
} 
