0

我希望根据我在 React 中的 Slider 上的水平滚动行为来更新我的列表项上的 className。关于如何解决这个问题的任何建议？到目前为止我找不到解决方案。

目前，一个图像填满了窗口的整个宽度，并且在滚动时下一个项目变得可见。但我也想让这个开关在 ul 列表项中可见。基本上，滚动后，我希望列表项 1 中的 className 变为“非活动”，第二个列表项 className 变为“活动”，依此类推。

基本上主要组件看起来像这样：

import React, { Component } from 'react';
import Slider from './Slider';

export default class Property extends Component {

  constructor(props) {
    super(props);
    this.state = {
      object: [
        {
          title: "...",
          description: "...",
          img: "...",
        },
        {
          ...}
      ]
    };
  }

  render() {
    return (
      <div id="property">
        <div className="detailsWrapper">
          <h2>Lodge Highlights</h2>
          <Slider object={this.state.object}/>
          <ul>
            <li className="is-active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
      </div>
    )
  }
}

我的 Slider 组件如下所示：

import React, { Component } from 'react';

export default class Slider extends Component {

  render() {
    return (
      <div className="higlights_slider">
        {this.props.object.map((eachObject, index) => {
          return (
            <div className="highlights_slider_content" key={eachObject.id} value={eachObject.id}>
              <img src={eachObject.img} alt=""/>
              <h3>{eachObject.title}</h3>
              <h4>{eachObject.description}</h4>   
            </div>
            )
           })}
        </div>
    )
  }
}

在我的 css（或 scss）中，我使用 .highlights_slideroverflow-x: scroll

任何帮助表示赞赏！提前致谢！！

4

2 回答 2

0

你只需要一堂课。每次滑块通过阈值时，观察者都会通知您，因此您可以从当前索引 - 1 处的幻灯片中删除类并在当前幻灯片上添加类。

于 2020-03-03T22:49:01.277 回答
0

有很多方法可以做到这一点，但我会推荐每张幻灯片的交叉点观察者https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API（最好的方法）。

如果您在实施观察者方面需要帮助，请告诉我。

你只需要一节课。每次滑块通过阈值时，观察者都会通知您，因此您可以从当前索引 - 1 处的幻灯片中删除类并在当前幻灯片上添加类。

于 2020-03-03T22:19:55.610 回答