掌握 Taro 自定义 showModal，构建完美交互体验

2024-01-15 14:26:58

Taro 自定义 showModal 指南：

大家好，我是 Taro 开发社区的忠实爱好者，也是一名资深的前端工程师。今天，我将和大家分享 Taro 自定义 showModal 的方法，助力开发者轻松构建个性化 UI 组件，提升小程序交互体验。

告别样式丑陋的默认弹窗

Taro 提供了很多类似 wx.showModal、wx.showLoading 这类 API，虽然使用方便，但样式丑陋，往往不满足我们的需求。因此，为了打造出更加美观、符合自身品牌调性和设计风格的弹窗组件，我们可以选择自定义 showModal。

准备工作

在开始自定义 showModal 之前，我们需要确保已经安装了 Taro 框架，并且熟悉 Taro 的基本使用。如果还不熟悉，可以参考 Taro 官方文档进行学习。

自定义步骤

创建一个 Taro 项目。
在 src 目录下创建一个 components 目录。
在 components 目录下创建一个 showModal 文件夹。
在 showModal 文件夹中创建一个 index.js 文件。
在 index.js 文件中编写自定义 showModal 组件的代码。

组件代码示例

import Taro from '@tarojs/taro';
import { View, Text, Button } from '@tarojs/components';
import './index.scss';

const CustomModal = () => {
  const [visible, setVisible] = Taro.useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const closeModal = () => {
    setVisible(false);
  };

  return (
    <View>
      <Button onClick={showModal}>打开弹窗</Button>
      {visible && (
        <View className='modal-mask'>
          <View className='modal-wrapper'>
            <View className='modal-content'>
              <Text>这是一个自定义的弹窗</Text>
              <Button onClick={closeModal}>关闭</Button>
            </View>
          </View>
        </View>
      )}
    </View>
  );
};

export default CustomModal;

在 index.scss 文件中，我们可以编写自定义 showModal 组件的样式。

.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.modal-content {
  width: 300px;
  padding: 20px;
  background-color: white;
  border-radius: 5px;
}