React JS中的水平滚动视图

在React JS中实现水平滚动视图，可以通过使用第三方库和纯CSS来实现。以下是具体的实现方法。

1. 使用第三方库

react-horizontal-scrolling-menu

react-horizontal-scrolling-menu是一个使用React JS编写的水平滚动菜单组件。此组件易于集成和定制，支持键盘操作和自定义CSS。

使用方法：

1. 安装react-horizontal-scrolling-menu依赖

npm install react-horizontal-scrolling-menu --save

2. 在需要使用的组件中引入HorizontalScrollMenu组件

import React from 'react';
import HorizontalScrollMenu from 'react-horizontal-scrolling-menu';

const list = [
  { name: 'item1' },
  { name: 'item2' },
  { name: 'item3' },
  { name: 'item4' },
  { name: 'item5' },
  { name: 'item6' },
  { name: 'item7' },
  { name: 'item8' },
  { name: 'item9' },
];

function App() {
  const MenuItem = ({ text, selected }) => {
    return <div className={`menu-item ${selected ? 'active' : ''}`}>{text}</div>;
  };

  return (
    <div className="App">
      <div className="App-header">
        <HorizontalScrollMenu
          data={list}
          MenuItem={MenuItem}
          scrollToSelected
        />
      </div>
    </div>
  );
}

export default App;

react-scroll-horizontal

react-scroll-horizontal是另一个可用于实现水平滚动视图的React JS库。该库支持各种滚动场景并具有可自定义的滚动行为。

使用方法：

1. 安装react-scroll-horizontal依赖

npm install react-scroll-horizontal --save

2. 在需要使用的组件中引入ScrollContainer组件

import React from 'react';
import ScrollContainer from 'react-scroll-horizontal';

const list = [
  { name: 'item1' },
  { name: 'item2' },
  { name: 'item3' },
  { name: 'item4' },
  { name: 'item5' },
  { name: 'item6' },
  { name: 'item7' },
  { name: 'item8' },
  { name: 'item9' },
];

function App() {
  const MenuItem = ({ text, selected }) => {
    return (
      <div className="menu-item-wrapper">
        <div className={`menu-item ${selected ? 'active' : ''}`}>{text}</div>
      </div>
    );
  };

  return (
    <div className="App">
      <div className="App-header">
        <ScrollContainer className="scroll-container">
          {list.map(item => (
            <MenuItem
              key={item.name}
              text={item.name}
            />
          ))}
        </ScrollContainer>
      </div>
    </div>
  );
}

export default App;

2. 使用纯CSS

使用纯CSS来实现水平滚动视图，需要使用overflow-x属性并调整white-space和display属性的值来确保内容自动换行，并且没有横向滚动条。

.scroll-container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

.menu-item {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 10px;
}

使用方法：

import React from 'react';

const list = [
  { name: 'item1' },
  { name: 'item2' },
  { name: 'item3' },
  { name: 'item4' },
  { name: 'item5' },
  { name: 'item6' },
  { name: 'item7' },
  { name: 'item8' },
  { name: 'item9' },
];

function App() {
  return (
    <div className="App">
      <div className="App-header">
        <div className="scroll-container">
          {list.map((item, index) => (
            <div key={`${item.name}-${index}`} className="menu-item">
              {item.name}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default App;

以上是React JS中实现水平滚动视图的两种方法，可以根据项目需求选择使用。