【Ant Design Mobile】踩坑之Carousel

1、从后台获取图片，页面轮播显示。

结果如下： 代码如下：

<Carousel autoplay={true} infinite={true}>
          {this.state.aSwiper && this.state.aSwiper.length
            ? this.state.aSwiper.map((item, index) => (
                <div key={index} className={Css["swiper-wrap"]}>
                  <img src={item} alt="" />
                </div>
              ))
            : ""}
        </Carousel>

原因：数据是从后台获取的，Carousel初始化的时候aSwiper为空导致的，所以把为空判断放在Carousel外面，确保aSwiper不为空后再初始化Carousel，修改后代码如下：

{this.state.aSwiper && this.state.aSwiper.length ? (
          <Carousel autoplay={true} infinite={true}>
            {this.state.aSwiper.map((item, index) => (
              <div key={index} className={Css["swiper-wrap"]}>
                <img src={item} alt="" />
              </div>
            ))}
          </Carousel>
        ) : (
          ""
        )}

2 当aSwiper只有一项的时候，显示效果同问题1，还未找到解决方法

3 在chrome浏览器中用鼠标左右切换图片的时候报错如下：

网上的解决方案是全局设置touch-action,如下：

*{
  touch-action: none; //或者pan-y
}

我尝试了下，报错还在，继续摸索