uni-app 动态设置页面背景颜色-工具盒子

我们在用 uni-app 开发前端应用的过程中，经常需要设置页面的背景颜色。设置全局页面背景颜色比较简单，这边就不展开。因 vue 平台与 nvue 平台有所差异，本文主要记录 vue 平台中的设置单独页面背景颜色的用法。

在页面中设置 `page` 样式

<template>
    <view></view>
</template>
&lt;script&gt;
&lt;/script&gt;
&lt;style lang=&quot;scss&quot;&gt; page { background: #ffffff; } &lt;/style&gt;

直接在页面跟元素上设置

<template>
    <view class="page-root"></view>
</template>
&lt;script&gt;
&lt;/script&gt;
&lt;style lang=&quot;scss&quot;&gt; .page-root { position: absolute; top: 0; width: 100%; min-height: 100%; background: #ffffff; } &lt;/style&gt;

通过 JS 动态修改页面背景颜色

<template>
    <view class="page-root" :style="{
        'background-color': bgColor
    }"></view>
</template>
&lt;script&gt;
export default {
data() {
return {
bgColor: '#ffffff'
}
},
onLoad(option) {
this.bgColor = '#ff0000'
setTimeout(() =&gt; {
this.bgColor = '#0000ff'
}, 1000)
}
}
&lt;/script&gt;
&lt;style lang=&quot;scss&quot;&gt; .page-root { position: absolute; top: 0; width: 100%; min-height: 100%; } &lt;/style&gt;