小程序动态修改page的背景颜色

假设同一个页面有2种背景色，我们该如何处理呢？

wxml：把所有的页面内容用一个class为page的view标签包裹起来

<view class="page {{haveData? 'page-bgwhite':''}}">
	<view wx:if="{{haveData}}"></view>
	<view wx:if="{{!haveData}}"></view>
</view>

wxss：

.page {
  background: red;
　display: block;
　min-height: 100%;
　width: 100%;
　position: absolute;
　left: 0;
　top: 0;
　z-index: 1;
}
.page-bgwhite {
  background: #ffffff;
}

js：

Page({
　data: {
　　haveData:  false
　},
　onLoad() {
　if (this.data.haveData) {
　	// 解决IOS系统下拉、上拉背景色的问题
     wx.setNavigationBarColor({
       frontColor: '#000000',
       backgroundColor: '#ffffff',
     });
     wx.setBackgroundColor({
       backgroundColor: '#ffffff',
     });
     wx.setNavigationBarTitle({
       title: '',
     });
   } else {
     wx.setNavigationBarColor({
       frontColor: '#000000',
       backgroundColor: 'red',
     });
     wx.setBackgroundColor({
       backgroundColor: 'red',
     });
    }
　}
})

附上小程序api地址：

https://developers.weixin.qq.com/miniprogram/dev/api/ui/background/wx.setBackgroundColor.html