useVibrate
提供震动反馈
何时使用
当需要操作或者使用震动时
API
const { vibrate, clear } = useVibrate(interval?: boolean, gap?: number);
参数说明
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
interval | 是否持续震动 | boolean | - |
gap | 持续震动间隔 | number | 200 |
返回值说明
返回值 | 说明 | 类型 |
---|---|---|
vibrate | 操作函数, 可根据参数执行长短震动 | (long?: boolean) => Promise<General.CallbackResult> |
clear | 若为持续震动可取消震动 | () => void |
代码演示
- React
- Vue
device/useVibrate/index
import React from 'react';
import { useVibrate } from 'taro-hooks';
import DemoContent from '@src/components/DemoContent';
import { Button } from '@taroify/core';
export default () => {
const { vibrate } = useVibrate();
const { vibrate: vibrateInterval, clear } = useVibrate(true);
return (
<DemoContent>
<Button
block
color="primary"
className="gap"
onClick={() => vibrate()}
shape="square"
>
短震动触感按钮
</Button>
<Button
block
color="primary"
className="gap"
onClick={() => vibrate(true)}
shape="square"
>
长震动触感按钮
</Button>
<Button
block
color="primary"
className="gap"
onClick={() => vibrateInterval()}
shape="square"
>
持续短震动触感按钮
</Button>
<Button
block
color="primary"
className="gap"
onClick={() => vibrateInterval(true)}
shape="square"
>
持续长震动触感按钮
</Button>
<Button
block
color="primary"
className="gap"
onClick={() => clear()}
shape="square"
>
关闭持续震动
</Button>
</DemoContent>
);
};
device/useVibrate/index
<template>
<demo-content>
<nut-button
shape="square"
type="primary"
class="gap"
block
@click="vibrate()"
>短震动触感按钮</nut-button
>
<nut-button
shape="square"
type="primary"
class="gap"
block
@click="vibrate(true)"
>长震动触感按钮</nut-button
>
<nut-button
shape="square"
type="primary"
class="gap"
block
@click="vibrateInterval()"
>持续短震动触感按钮</nut-button
>
<nut-button
shape="square"
type="primary"
class="gap"
block
@click="vibrateInterval(true)"
>持续长震动触感按钮</nut-button
>
<nut-button shape="square" type="primary" class="gap" block @click="clear()"
>关闭持续震动</nut-button
>
</demo-content>
</template>
<script setup lang="ts">
import { useVibrate } from 'taro-hooks';
const { vibrate } = useVibrate();
const { vibrate: vibrateInterval, clear } = useVibrate(true);
</script>
Hook 支持度
微信小程序 | H5 | ReactNative |
---|---|---|
✔️ | ✔️ | ✔️ |