时间戳

首页 > 解决方案 > React JS无限滑块问题

javascript - React JS无限滑块问题

问题描述

我正在尝试构建一个无限滑块。

当我滚动滑块时，最后一个克隆项目按预期显示，但滑块停止。我想继续无限滚动，这个滑块应该总是有另一个项目可以滚动到。

这是我的构造函数中的“rails”数组，它们是导入的组件：

import MusicRail from '../../components/MusicRail';
import GamesRail from '../../components/GamesRail';
import MoviesRail from '../../components/MoviesRail';

constructor(props) {
   super(props);

   this.state = {
      indexX: 0,
      indexY: 1
   }

   this.rails = [
      MusicRail,
     GamesRail,
     MoviesRail
  ]
}

然后我在克隆第一个和最后一个项目以附加到数组的第一个和最后一个位置后更新导轨。

let rails = this.rails;
let firstObject = this.rails[0];
let lastObject = this.rails.slice(-1)[0];
this.rails = [lastObject, ...rails, firstObject];

这是我的 onMoveVertical 函数 - 方向绑定到下面的另一个函数 setupKeys：

onMoveVertical(direction) {
    if(!this.state.active || this.state.profileMenu.active) return;

    const moveLocal = (direction) => {
      let {indexY} = this.state;
      indexY = (direction === 'UP') ? (indexY === 0) ? 0 : indexY - 1 : (indexY < this.rails.length-1 ) ? indexY + 1 : this.rails.length-1;

      this.setState({
        indexY,
      });
    };

    const activeComponent = this[`${this.className}-${this.state.indexY}`];
    if(activeComponent && activeComponent.onMoveVertical) {
      const canMove = activeComponent.onMoveVertical(direction);

      if(!canMove) {
        moveLocal(direction);
      }
    } else {
      moveLocal(direction);
    }

  }

设置键功能：

setupKeys() {
    key('up', this.keyScope, this.onMoveVertical.bind(this, 'UP'));
    key('down', this.keyScope, this.onMoveVertical.bind(this, 'DOWN'));
  }

标签： javascriptreactjs

解决方案

尝试将 this.rails 移入状态。当属性仅在此/对象上时，更新它的值不会导致调用渲染，因此视图不会更新。

推荐阅读