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

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>
  );
};

Vue

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
✔️		✔️