useLoading

显示或隐藏加载提示框

何时使用

当需要使用加载提示框

API

const { show, hide } = useLoading(initialOption);

参数说明

initialOption: PartialLoadingOption

初始提示框配置(若指定后面可与新的配置合并)

参数	说明	类型	默认值
title	提示的内容	string	-
mask	是否显示透明蒙层，防止触摸穿透	boolean	-

返回值说明

返回值	说明	类型
show	显示加载提示框	PromiseOptionalAction<TaroGeneral.CallbackResult, PartialLoadingOption>
hide	隐藏提示框	PromiseWithoutOptionAction

代码演示

React

feedback/useLoading/index

import React from 'react';
import { useLoading } from 'taro-hooks';
import DemoContent from '@src/components/DemoContent';
import { Button } from '@taroify/core';

export default () => {
  const { show, hide } = useLoading({ title: 'initial title' });

  const handleChangeOption = () => {
    show({
      title: '点击隐藏按钮进行隐藏',
    });
  };

  return (
    <DemoContent>
      <Button
        block
        color="primary"
        className="gap"
        onClick={() => show()}
        shape="square"
      >
        展示带初始配置的Loading
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={handleChangeOption}
        shape="square"
      >
        展示新配置的Loading
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={hide}
        shape="square"
      >
        隐藏新配置的Loading
      </Button>
    </DemoContent>
  );
};

Vue

feedback/useLoading/index

<template>
  <demo-content>
    <nut-button shape="square" type="primary" class="gap" block @click="show()"
      >展示带初始配置的Loading</nut-button
    >
    <nut-button
      shape="square"
      type="primary"
      class="gap"
      block
      @click="handleChangeOption()"
      >展示新配置的Loading</nut-button
    >
    <nut-button shape="square" type="primary" block @click="hide()"
      >隐藏新配置的Loading</nut-button
    >
  </demo-content>
</template>

<script setup lang="ts">
import { useLoading } from 'taro-hooks';

const { show, hide } = useLoading({ title: 'initial title' });

const handleChangeOption = () => {
  show({
    title: '点击隐藏按钮进行隐藏',
  });
};
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️	✔️	✔️