我正在尝试在 react.js 中构建一个垂直鼠标滚轮控制滑动器，但它不起作用？

Question

我正在尝试使用 react.js 创建一个带有 react-id-swiper 的鼠标滚轮控制垂直滑动器，但它没有工作没有错误没有样式只显示放置在 div 中的文本。任何人都可以帮助解决问题。

我只是编写这段代码并从库中包含 css。

import React from "react";
import Swiper from "react-id-swiper";
import "react-id-swiper/lib/styles/scss/swiper.scss";

class Example extends React.Component {
  render() {
    const params = {
      container: ".container",
      pagination: ".swiper-pagination",
      paginationClickable: true,
      direction: "vertical"
    };
    return (
      <Swiper {...params}>
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
        <div>Slide 4</div>
        <div>Slide 5</div>
      </Swiper>
    );
  }
}

export default Example;

Answer 1

您必须在选项中启用鼠标滚轮事件，如 Swiper docs 中所述：

const params = {
  container: ".container",
  pagination: ".swiper-pagination",
  paginationClickable: true,
  direction: "vertical",
  mousewheel: true, // https://idangero.us/swiper/api/#mousewheel
};

return (
  <Swiper {...params}>
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
    <div>Slide 4</div>
    <div>Slide 5</div>
  </Swiper>
);