uniapp css设置背景色

uniapp给页面设置背景色的几种方法。

全局设置背景色

全局设置背景色就是应用内的所有页面都设置背景色，这种方式比较简单。

• 在vue的入口文件app.vue 里设置，
• 也可以引入一个独立的css文件来设置。

切记不要在style标签上添加scoped属性。 scoped是局部的意思，在局部设置背景色会讲scoped。

在app.vue 直接设置应用的背景色

<style>
page {
    background:#f6f6f6;
}
</style>

引入独立的css文件设置全局打背景色。

<style lang="scss">
@import '@/static/common.scss';
</style>

上面两种方法都是设置应用的背景色。

局部设置背景色

只给当前页面设置背景色，其他页面不受影响。局部设计背景色有及个思路，

• 在页面跟标签设置一个class。然后根据定位来设置背景色。
• 在每个页面设置一个全局的style标签，然后每个页面都设置一个page的颜色

//设置一个class
<template>
<view class="root">
</view>
</template>

<style lang="scss" scoped>
.root {
position:absolute;
min-height:100%;
width:100%;
background:#f6f6f6;
}
</style>

每个页面都单独设置page

<template>
<view class="root">
</view>
</template>

// 在每个页面都设置一个page
<style>
page {
    background:#f6f6f6;
}
</style>

<style lang="scss" scoped>

</style>