antd-mobile 的 Carousel 轮播组件踩坑记录

[liubinis86]

问题描述：

• antd-mobile 的 Carousel 用于轮播用于轮播异步拉取的图片时，若在其初始化时所绑定的data数组的长度小于 2的话，即使设置了autoplay，他也是不会自动滚动的。但是在触发滑动事件后，它又是会自动轮播的。

• 如图所示：

  

解决办法：

1. 要给 state 中的对应的 data 设置长度不少于2的数组作为默认值。

import { Carousel } from "antd-mobile";
class App extends React.Component {
  state = {
    // **最少长度为2，因为一张图片滚不了**
    data: [1, 2],
    imgHeight: 176
  };
  componentDidMount() {
    // 假装对state.data进行了异步操作
   setTimeout(()=>{this.setState(data:[3,4,5])},100)
  }
  render() {
    return (
      <Carousel autoplay infinite>
        {this.state.data.map(val => (
          <img
            key={val}
            src={`https://www.abc.a${val}.png`}
          />
        ))}
      </Carousel>
    );
  }
}

2. 在图片异步拉取完成之后再展示轮播图。

import { Carousel } from "antd-mobile";
class App extends React.Component {
  state = {
    data: [],
    imgHeight: 176
  };
 componentDidMount() {
    // 假装对state.data进行了异步操作
   setTimeout(()=>{this.setState(data:[3,4,5])},100)
  }
  render() {
    return (
      // **当数据加载完再展示**
     {this.state.data.length&& <Carousel autoplay infinite>
        {this.state.data.map(val => (
            <img
              src={`https://www.abc.a${val}.png`}
            />
        ))}
      </Carousel>}
    );
  }
}

• 这样设置以后初始化的时候就能自动轮播了。如图所示：

  总结：Carousel这个组件必须在初始化的时候就有一个长度>1的默认数组才能触发他的autoplay自动轮播属性。

[826587163]

谢谢