Reactjs 在react js的fb messenger中创建旋转木马卡

我正在开发一个聊天小部件，比如react js中的对讲机小部件，我想添加旋转木马卡组件，就像在facebook messenger中一样

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

我搜索了一下，找不到这个的任何包。

---

我如何实现这一点？我是新来react的。

react引导程序有一个转盘组件

还有反应灵敏的旋转木马

---

react引导程序有一个旋转木马组件

还有反应灵敏的旋转木马

---

如另一个答案所述，您可以找到一个已经构建的组件并使用它

但是，您可以使用和flexbox自己实现它

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

---

如另一个答案所述，您可以找到一个已经构建的组件并使用它

但是，您可以使用和flexbox自己实现它

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

---

与其他答案一样，您在react引导和react引导中都有旋转木马组件

就个人而言，我觉得reactstrap比ReactBootstrap有更好的文档。您可以在他们的官方文档中找到一个转盘示例。

但是，这些示例没有如您所期望的那样具有滑动事件，而且我也找不到web和移动视图中具有滑动事件的旋转木马。最后，我决定制作一个带有滑动活动的定制旋转木马

对于web，我使用了

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>
    );
   }
  }

//保存最后和当前X轴位置的全局变量。
var-lastX=0；
var-currentX=0；
//对于web，根据鼠标拖动事件检测向左和向右滑动。
手机=e=>{
e、 坚持（）；
让type=e.type.toLowerCase（）；
如果（类型==“dragstart”）{
lastX=e.clientX；
}否则{
如果（lastX==0 | | e.clientX==0 | | lastX==e.clientX）{
返回；
}
如果（e.clientX>lastX）{
这是先前的（）；
控制台日志（“swife权限”）；
}否则{
这个。下一个（）；
控制台日志（“swife left”）；
}
}
};
//对于移动设备，根据触摸事件检测左右滑动。
handleTouch=e=>{
e、 坚持（）；
让type=e.type.toLowerCase（）；
如果（类型==“touchstart”）{
lastX=e.touchs[0].clientX；
}
如果（类型==“触摸移动”）{
currentX=e.Touchs[0].clientX；
}
如果（类型==“touchend”）{
如果（lastX==0 | | currentX==0 | | lastX==currentX）{
返回；
}
如果（当前X>最后X）{
这是先前的（）；
控制台日志（“swife权限”）；
}否则{
这个。下一个（）；
控制台日志（“swife left”）；
}
}
};
//修改渲染。
render（）{
const{activeIndex}=this.state；
const slides=items.map（item=>{
返回(
这个.handleTouch（e）}
onTouchMove={e=>this.handleTouch（e）}
onTouchEnd={e=>this.handleTouch（e）}
onDragStart={e=>this.handleMouse（e）}
onDragEnd={e=>this.handleMouse（e）}
/>
);
});
返回(
{幻灯片}
);
}
}

工作和生活

---

希望它能帮助你

与其他答案一样，您在react引导和react引导中有carousel组件

就个人而言，我觉得reactstrap比ReactBootstrap有更好的文档。您可以在他们的官方文档中找到一个转盘示例。

但是，这些示例没有如您所期望的那样具有滑动事件，而且我也找不到web和移动视图中具有滑动事件的旋转木马。最后，我决定制作一个带有滑动活动的定制旋转木马

对于web，我使用了

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>
    );
   }
  }

//保存最后和当前X轴位置的全局变量。
var-lastX=0；
var-currentX=0；
//对于web，根据鼠标拖动事件检测向左和向右滑动。
手机=e=>{
e、 坚持（）；
让type=e.type.toLowerCase（）；
如果（类型==“dragstart”）{
lastX=e.clientX；
}否则{
如果（lastX==0 | | e.clientX==0 | | lastX==e.clientX）{
返回；
}
如果（e.clientX>lastX）{
这是先前的（）；
控制台日志（“swife权限”）；
}否则{
这个。下一个（）；
控制台日志（“swife left”）；
}
}
};
//对于移动设备，根据触摸事件检测左右滑动。
handleTouch=e=>{
e、 坚持（）；
让type=e.type.toLowerCase（）；
如果（类型==“touchstart”）{
lastX=e.touchs[0].clientX；
}
如果（类型==“触摸移动”）{
currentX=e.Touchs[0].clientX；
}
如果（类型==“touchend”）{
如果（lastX==0 | | currentX==0 | | lastX==currentX）{
返回；
}
如果（当前X>最后X）{
这是先前的（）；
控制台日志（“swife权限”）；
}否则{
这个。下一个（）；
控制台日志（“swife left”）；
}
}
};
//修改渲染。
render（）{
const{activeIndex}=this.state；
const slides=items.map（item=>{
返回(
这个.handleTouch（e）}
onTouchMove={e=>this.handleTouch（e）}
onTouchEnd={e=>this.handleTouch（e）}
onDragStart={e=>this.handleMouse（e）}
onDragEnd={e=>this.handleMouse（e）}