taro Swiper组件--异形滚动

效果

<Swiper
  indicatorDots={false}
  previousMargin='50px'
  nextMargin='50px'
  autoplay={false}
  interval='100'
  onChange={onChangeSwiper}
>
  {
    [1,2,3].map((item, index) => {
      return (
        <SwiperItem
          key={`item-${index}`}
        >
          <View className={`demo-item ${currentIndex=== index ? 'active' : ''}`}>
            { item }
          </View>
        </SwiperItem>
      )
    })
  }
</Swiper>

const [ currentIndex, setCurrentIndex ] = useState(0)
const onChangeSwiper = (e) => {
  const idx = e.detail.current
  setCurrentIndex(idx)
}

.demo-item {
  height: 272px;
  color: #fff;
  background: #000;
  border-radius: 39px;
  text-align: center;
  transform: scale(.9);
  transition: all ease .4s;
  &.active {
    transform: scale(1);
  }
}