useBackground
动态设置窗口
何时使用
当需要对窗口背景色和字体设置时
API
const [setBackgroundColor, setBackgroundTextColor] = useBackground(option?);
参数说明
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
backgroundColor | 窗口的背景色,必须为十六进制颜色值 | string | - |
backgroundColorTop | 顶部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持 | string | - |
backgroundColorBottom | 底部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持 | string | - |
textStyle | 下拉背景字体、loading 图的样式 | TTextStyle | - |
TextStyle
参数 | 类型 | 说明 |
---|---|---|
dark | dark | dark 样式 |
light | light | light 样式 |
返回值说明
参数 | 类型 | 说明 |
---|---|---|
setBackgroundColor | (setOption?: BackgroundColorOption) => Promise<General.CallbackResult> | 动态设置下拉背景字体、loading 图的样式 ( RN仅iOS ) |
setBackgroundTextColor | (textStyle: TextStyle) => Promise<General.CallbackResult> | 动态设置窗口的背景色( RN仅Android ) |
BackgroundColorOption
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
backgroundColor | 窗口的背景色,必须为十六进制颜色值 | string | - |
backgroundColorTop | 顶部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持 | string | - |
backgroundColorBottom | 底部窗口的背景色,必须为十六进制颜色值,仅 iOS 支持 | string | - |
代码演示
- React
- Vue
layout/useManualPullDownRefresh/index
import React from 'react';
import { useManualPullDownRefresh, useBackground } from 'taro-hooks';
import Mock from 'mockjs';
import DemoContent from '@src/components/DemoContent';
import { Button } from '@taroify/core';
export default () => {
const [start, stop] = useManualPullDownRefresh();
useBackground({ textStyle: 'dark', backgroundColor: Mock.Random.color() });
return (
<DemoContent>
<Button
block
color="primary"
className="gap"
onClick={() => start()}
shape="square"
>
开始下拉刷新
</Button>
<Button
block
color="primary"
className="gap"
onClick={stop}
shape="square"
>
结束下拉刷新
</Button>
<Button
block
color="primary"
className="gap"
onClick={() => start(2000)}
shape="square"
>
开始下拉刷新2S后停止
</Button>
</DemoContent>
);
};
layout/useManualPullDownRefresh/index
<template>
<demo-content>
<nut-button shape="square" type="primary" class="gap" block @click="start()"
>开始下拉刷新</nut-button
>
<nut-button shape="square" type="primary" class="gap" block @click="stop()"
>结束下拉刷新</nut-button
>
<nut-button
shape="square"
type="primary"
class="gap"
block
@click="start(2000)"
>开始下拉刷新2S后停止</nut-button
>
</demo-content>
</template>
<script setup lang="ts">
import { useManualPullDownRefresh, useBackground } from 'taro-hooks';
import Mock from 'mockjs';
useBackground({ textStyle: 'dark', backgroundColor: Mock.Random.color() });
const [start, stop] = useManualPullDownRefresh();
</script>
Hook 支持度
微信小程序 | H5 | ReactNative |
---|---|---|
✔️ | ✔️ |