uniapp微信小程序页面背景色

1,894 阅读1分钟

1、单页面设置背景色

如果想在单页面设置背景颜色,那么在当前页面编写样式就好了,需要注意的一个点就是把page写在带scoped的样式标签里会失效,如下

<style scoped>
    page{
        background-color: #007AFF;
    }
</style>

解决方法就是去掉style标签上的scoped

<style>
    page{
        background-color: #007AFF;
    }
</style>

2、全局页面背景色

当我们在pages.json中设置backgroundColor时,发现背景颜色不生效,官方文档介绍如下

image.png

backgroundColor指的是下拉显示出来的窗口背景色,而不是页面背景颜色,意思就是说这个属性设置的是窗体下拉刷新或上拉加载时露出的背景,所以会让人误以为没有生效

正确的做法是在App.vue的style样式表中设置

image.png