连续循环卷轴

Question

我使用react中的https://github.com/locomotivemtl/locomotive-scroll插件来实现平滑滚动。我试图让它做一个连续的滚动，这样无论你滚动到哪个方向，它都会循环，通过添加和删除状态数组中的项来改变顺序。

这是有效的，但会导致一些超级闪烁。

演示的小结是

https://codesandbox.io/s/heuristic-resonance-0ybkl

https://codesandbox.io/s/young-wind-ozeeq

https://codesandbox.io/s/patient-darkness-6gxj1

任何帮助都将不胜感激

下面的代码

import React from "react";
import ReactDOM from "react-dom";
import LocomotiveScroll from "locomotive-scroll";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      limit: null,
      items: [
        "https://www.fillmurray.com/640/460",
        "https://www.fillmurray.com/g/640/560",
        "https://www.fillmurray.com/640/760",
        "https://www.fillmurray.com/g/640/860",
        "https://www.fillmurray.com/640/160",
        "https://www.fillmurray.com/g/640/260",
        "https://www.fillmurray.com/g/640/360",
        "https://www.fillmurray.com/g/640/460"
      ]
    };
  }
  componentDidMount() {
    const target = document.querySelector("#view");
    const scroll = new LocomotiveScroll({
      el: target,
      smooth: true,
      smoothMobile: true,
      getDirection: true
    });

    scroll.on("scroll", obj => {
      console.log(obj.scroll.y);
      if (this.state.limit !== null) {
        if (obj.direction === "up") {
          var current = this.state.items;

          var first = current.shift();
          current.push(first);
          this.setState(
            {
              items: current
            },
            () => {
              scroll.update();
            }
          );
        }

        if (obj.direction === "down") {
          current = this.state.items;
          var last = current.pop();
          current.unshift(last);
          this.setState(
            {
              items: current
            },
            () => {
              scroll.update();
            }
          );
        }
      } else {
        var halfway = obj.limit / 2;
        scroll.scrollTo(target, halfway);
        this.setState({
          limit: obj.limit
        });
      }
    });

    scroll.scrollTo(target, 1);
  }
  render() {
    return (
      <div className="App">
        <div id="view">
          <div className="left">
            {this.state.items.map(item => {
              return <img src={item} alt="" />;
            })}
          </div>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

出现闪烁的原因是因为整个组件都会在scroll事件上重新呈现，而您的元素上没有键。

this.setState(
    {
        items: current
    },
    () => {
        scroll.update();
    }
);

在上面的代码中，您设置了scroll事件的状态，该事件将导致列表的完全重新呈现。您需要在map函数中的元素上设置一个key。

Key docs

Code Sandbox

import React from "react";
import ReactDOM from "react-dom";
import LocomotiveScroll from "locomotive-scroll";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      limit: null,
      items: [
        "https://www.fillmurray.com/640/460",
        "https://www.fillmurray.com/g/640/560",
        "https://www.fillmurray.com/640/760",
        "https://www.fillmurray.com/g/640/860",
        "https://www.fillmurray.com/640/160",
        "https://www.fillmurray.com/g/640/260",
        "https://www.fillmurray.com/g/640/360",
        "https://www.fillmurray.com/g/640/460"
      ]
    };
  }
  componentDidMount() {
    const target = document.querySelector("#view");
    const scroll = new LocomotiveScroll({
      el: target,
      smooth: true,
      smoothMobile: true,
      getDirection: true
    });

    scroll.on("scroll", ({ limit, direction }) => {
      if (this.state.limit !== null) {
        if (direction === "up") {
          console.log("up");
          var current = this.state.items;
          var last = current.pop();
          current.unshift(last);
          this.setState(
            {
              items: current
            },
            () => {
              scroll.update();
            }
          );
        }

        if (direction === "down") {
          current = this.state.items;
          var first = current.shift();
          current.push(first);
          this.setState(
            {
              items: current
            },
            () => {
              scroll.update();
            }
          );
        }
      } else {
        var halfway = limit / 2;
        scroll.scrollTo(target, halfway);
        this.setState({
          limit
        });
      }
    });

    scroll.scrollTo(target, 1);
  }
  render() {
    return (
      <div className="App">
        <div id="view">
          <div className="left">
            {this.state.items.map((item, idx) => {
              return <img key={`${item}${idx}`} src={item} alt="" />;
            })}
          </div>
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);