uni-app 动态设置页面背景颜色

我们在用 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>

版权属于：瞭月

本文链接：https://www.lervor.com/archives/275/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。