百度智能小程序 设置窗口背景颜色

swan.setBackgroundColor

基础库 3.10.4 版本开始支持。

解释：设置窗口的背景颜色。顶部或底部窗口颜色设置，建议与页面背景色保持一致，避免下拉或上拉页面时颜色不协调。

方法参数

Object object

object参数说明

示例

代码示例 1 - backgroundColor 

在开发者工具中打开

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>设置窗口背景色</view>
            <view>backgroundColor</view>
        </view>
        <button bind:tap="setBackgroundColor" type="primary" hover-stop-propagation="true">设置窗口颜色为蓝色</button>
    </view>
</view>

Page({
    setBackgroundColor() {
        swan.setBackgroundColor({
            backgroundColor: '#5B9FFF',
            success: () => {
                console.log('setBackgroundColor success');
            },
            fail: err => {
                console.log('setBackgroundColor fail', err);
            }
        });
    }
});

图片示例

代码示例 2 - backgroundColorTop 

在开发者工具中打开

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>设置的顶部背景窗口颜色</view>
            <view>色值为: #FFC0CB</view>
        </view>
        <button type="primary" bindtap="setBackgroundColor">setBackgroundColor</button>
    </view>
</view>

Page({
    setBackgroundColor() {
        swan.setBackgroundColor({
            backgroundColorTop: '#FFC0CB',
            success: () => {
                console.log('setBackgroundColor success');
            },
            fail: err => {
                console.log('setBackgroundColor fail', err);
            }
        });
    }
});

图片示例

代码示例 3 - backgroundColorBottom 

在开发者工具中打开

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>设置的底部背景窗口颜色</view>
            <view>色值为: #7B68EE</view>
        </view>
        <button type="primary" bindtap="setBackgroundColor">setBackgroundColor</button>
    </view>
</view>

Page({
    setBackgroundColor() {
        swan.setBackgroundColor({
            backgroundColorBottom: '#7B68EE',
            success: () => {
                console.log('setBackgroundColor success');
            },
            fail: err => {
                console.log('setBackgroundColor fail', err);
            }
        });
    }
});

错误码

Android

iOS