react 动态切换轮播图卡片

通过换一组切换卡片，也可以滑动卡片切换，效果如图⬆️

import { Carousel, Card } from 'antd-mobile';
import { inject, observer } from 'mobx-react';
interface Props {
  configStore: ConfigStore;
}
@inject('configStore')
@observer
export default class HomePage extends React.Component{
	render() {
	  //卡皮信息
	   const bannerList = [{  }];
	   const { configStore } = this.props;
	   const { selectedIndex } = configStore;
	   <div className={`${prefixCls}-recommend-header`}>
		<span
		className={`${prefixCls}-recommend-header-btn`}
		onClick={() => this.switchHandle()}>
		换一组
		<img
		src={refresh}
		className={`${prefixCls}-recommend-header-btn-refresh`}
		/>
		</span>
		<div className={`${prefixCls}-recommend-body`}>
			<Carousel	
			selectedIndex={selectedIndex}
			className={`${prefixCls}-recommend-body-carousel space-carousel`}
			frameOverflow="visible"
			cellSpacing={10}
			infinite
			dotStyle={{
			  background: '#D6D6D6',
			  borderRadius: '1.5px',
			  width: '20.4px',
			  height: '3px',
			}}
			dotActiveStyle={{
			  background: '#003FB9',
			  borderRadius: '1.5px',
			  width: '20.4px',
			  height: '3px',
			}}>
			{bannerList.map((item, index) => (
			  <Card
			    key={String(index)}
			    className={`${prefixCls}-recommend-body-card`}>
			  </Card>
			))}
			</Carousel>
		</div>
	   </div>
	}
	switchHandle() {
	   const { configStore } = this.props;
	   const { selectedIndex } = configStore;
	   if (selectedIndex === 2) {
	     configStore.setSelectedIndex(0);
	   } else {
	     configStore.setSelectedIndex(selectedIndex + 1);
	   }
	 }
}

CSS部分

&-recommend {
    margin: arem(4.16) 0 arem(4.96);
    padding: 0 arem(3.04) 0 arem(3.2);

    &-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: arem(3.84);
      
      &-btn {
        font-size: 12px;
        color: #2557e6;
        line-height: 18px;

        &-refresh {
          width: arem(2.24);
          margin-top: arem(0.2);
          margin-left: arem(1.12);
          vertical-align: top;
          line-height: 18px;
        }
      }
    }

    &-body {
      margin: arem(3.84) 0 arem(4.96);
      width: 100%;
      min-height: arem(41.7);
      overflow: hidden;

      .slider-decorator-0 {
        bottom: -20px !important;
      }

      &-card {
        background-color: #F8F8F8;
        border-radius: 10px !important;
        padding: arem(2.08) arem(3.04);
        box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.35),
          inset 0 1px 1px 0 #ffffff;
      }
    }
  }

configStore.ts

import { observable } from 'mobx';
export default class HomeStore {
  @observable selectedIndex = 0; 
}