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

在页面中设置 page 样式

<template>
    <view></view>
</template>

<script>
</script>

<style lang="scss">
page {
    background: #ffffff;
}
</style>

直接在页面跟元素上设置

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

<script>
</script>

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

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

<template>
    <view class="page-root" :style="{
        'background-color': bgColor
    }"></view>
</template>

<script>
export default {
    data() {
        return {
            bgColor: '#ffffff'
        }
    },
    onLoad(option) {
        this.bgColor = '#ff0000'
        setTimeout(() => {
            this.bgColor = '#0000ff'
        }, 1000)
    }
}
</script>

<style lang="scss">
.page-root {
    position: absolute;
    top: 0;
    width: 100%;
    min-height: 100%;
}
</style>
如果觉得我的文章对你有用,请点个赞