react移动端项目弹窗后禁止滑动

在React移动端项目中，你可以通过添加CSS样式和使用React组件来禁止滑动。以下是一种常见的方法：

1. 创建一个全局的CSS文件，例如`global.css`，并在你的项目中引入它。
2. 在`global.css`文件中添加以下CSS样式：

/* 禁止滑动 */
body {
  overflow: hidden;
}

.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

上述CSS样式会将页面的滚动条和滑动行为禁止掉，同时保持弹窗内容可滚动。

3. 在你的React组件中，使用state来控制弹窗的显示与隐藏，并通过条件渲染来添加相应的CSS类名。

import React, { useState } from 'react';
import './global.css';

function App() {
  const [modalOpen, setModalOpen] = useState(false);

  const openModal = () => {
    setModalOpen(true);
  };

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

  return (
    <div className={modalOpen ? 'modal-open' : ''}>
      {/* 页面内容 */}
      <button onClick={openModal}>打开弹窗</button>

      {/* 弹窗 */}
      {modalOpen && (
        <div className="modal">
          <h2>弹窗内容</h2>
          <button onClick={closeModal}>关闭弹窗</button>
        </div>
      )}
    </div>
  );
}

export default App;

在上述示例中，我们使用了`modalOpen`状态来控制弹窗的显示与隐藏。当弹窗打开时，给根元素添加`modal-open`类名，这将应用之前定义的CSS样式，禁止页面滑动。

通过点击按钮来打开和关闭弹窗，并更新`modalOpen`状态。

这样就可以在React移动端项目中实现弹窗后禁止滑动的效果了。记得在修改完配置后重新启动应用程序。