假设同一个页面有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