在反应js中创建轮播卡，如fb messenger答案

【问题标题】：Create carousel cards as in fb messenger in react js在反应js中创建轮播卡，如fb messenger
【发布时间】：2019-09-03 10:26:42
【问题描述】：

我正在开发一个聊天小部件，如 react js 中的对讲小部件，我想添加轮播卡片组件，如 facebook messenger。

在移动设备上，当用户刷一张卡片时，下一张卡片应该会出现并居中，而在网络上，应该有一个左右按钮，点击时会显示相应的卡片。

我搜索并找不到任何包。我该如何实施？我是新手。

【问题讨论】：

你还在寻找答案吗？

标签： reactjs chat carousel

【解决方案1】：

作为其他答案，您在 react-bootstrap 和 reactstrap 中有轮播组件。

就个人而言，我觉得 reactstrap 比 react-bootstrap 有更好的文档。您可以在他们的官方文档中简单地找到轮播的示例。 https://reactstrap.github.io/components/carousel/

但是，这些示例没有您期望的滑动事件，我也找不到任何带有滑动事件的轮播，用于网络和移动视图。所以最后，我决定制作一个带有滑动事件的自定义轮播。

对于网络，我使用了onDragStart 和onDragEnd。而对于移动端视图，我使用了onTouchStart、onTouchMove 和onTouchEnd 来检测左右滑动。

这里是变化。

//Global variables to hold the last and current X-axis positions.
var lastX = 0;
var currentX = 0;

//For web, detect swipe left and right based on mouse drag events. 
handleMouse = e => {
    e.persist();
    let type = e.type.toLowerCase();
    if (type === "dragstart") {
      lastX = e.clientX;
    } else {
      if (lastX === 0 || e.clientX === 0 || lastX === e.clientX) {
        return;
      }
      if (e.clientX > lastX) {
        this.previous();
        console.log("swife right");
      } else {
        this.next();
        console.log("swife left");
      }
    }
  };

  //For mobile, detect swipe left and right based on touch events. 
  handleTouch = e => {
    e.persist();
    let type = e.type.toLowerCase();

    if (type === "touchstart") {
      lastX = e.touches[0].clientX;
    }

    if (type === "touchmove") {
      currentX = e.touches[0].clientX;
    }

    if (type === "touchend") {
      if (lastX === 0 || currentX === 0 || lastX === currentX) {
        return;
      }
      if (currentX > lastX) {
        this.previous();
        console.log("swife right");
      } else {
        this.next();
        console.log("swife left");
      }
    }
  };

  //Modified render.
  render() {
    const { activeIndex } = this.state;
    const slides = items.map(item => {
      return (
        <CarouselItem
          onExiting={this.onExiting}
          onExited={this.onExited}
          key={item.src}
        >
          <img
            style={{ width: "100%" }}
            src={item.src}
            alt={item.altText}
            onTouchStart={e => this.handleTouch(e)}
            onTouchMove={e => this.handleTouch(e)}
            onTouchEnd={e => this.handleTouch(e)}
            onDragStart={e => this.handleMouse(e)}
            onDragEnd={e => this.handleMouse(e)}
          />
        </CarouselItem>
      );
    });

    return (
      <Carousel
        activeIndex={activeIndex}
        next={this.next}
        previous={this.previous}
        interval={false}
      >
        {slides}

        <CarouselControl
          direction="prev"
          directionText="Previous"
          onClickHandler={this.previous}
        />
        <CarouselControl
          direction="next"
          directionText="Next"
          onClickHandler={this.next}
        />
      </Carousel>
    );
   }
  }

工作demo 和fiddle。

希望对您有所帮助。

【讨论】：

【解决方案2】：

正如另一个答案中提到的，您可以找到一个已经构建的组件并使用它。

但是您可以使用CSS scroll snap 和 flexbox 自己实现它。

这里有一篇文章概述了这种方法（不在反应中但仍然适用）。

https://developers.google.com/web/updates/2018/07/css-scroll-snap

【讨论】：

【解决方案3】：

react-bootstrap 有一个轮播组件

here 并且有反应响应轮播 here

【讨论】：