我们在用 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/
版权声明:本文为瞭月原创文章,转载请附上原文出处链接和本声明。