taro next h5 component Swiper 动态更新swiperItem数量样式错乱且不能滑动

[eiddie]

问题描述

• taro next beta5 react h5 component动态增加SwiperItem数量，Swiper样式错乱， 不能滑动

• 减少SwiperItem数量直接报错

复现步骤

增加swiperItem数量

import React,{ useState} from 'react'
import { View, Swiper, SwiperItem , Button} from '@tarojs/components';

import './index.scss'

const SwiperTest: React.FC  = () => {
  const [arr, setArr] = useState<Array<number>>([]);

  const handleClick = () => {
    setArr([1, 2, 3, 4])
  }
  return (
    <View className="test-swiper">
      <View>
        <Button onClick={handleClick}>update arr</Button>
      </View>
      <Swiper
      className='test-h'>
        {arr.map((item, index) => (
          <SwiperItem key={index}>
            <View className="item">swiper item{item}</View>
          </SwiperItem>
        ))}
      </Swiper>
    </View>
  );
}

export default SwiperTest

.test-h {
  height: 500px;
  .swiper-container {
    height: 500px;
  }
  .item {
    width:630px;
    height:425px;
    border: 1px solid red;
  }
}

减少SwiperItem数量

  const [arr, setArr] = useState<Array<number>>([1,2,3,4]);

   const handleClick = () => {
    setArr([1，2])
  }

期望行为

动态更新SwiperItem数量Swiper h5 端样式不会错乱且能够滑动， 和小程序保持一致

报错信息

增加swiperItem数量

h5 截图

小程序截图

减少SwiperItem数量

h5 报错截图

系统信息

补充信息

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[eiddie]

workaround: 更新Swiper key值，让Swiper重新渲染

 <Swiper
        key={arr.join('_')}
        className='test-h'>
        {arr.map((item) => (
          <SwiperItem key={item}>
            <View className="item">swiper item{item}</View>
          </SwiperItem>
        ))}
 </Swiper>

[xmsz]

这个swiper也太蛋疼了吧

只要是动态渲染swiperItem就会一直疯狂重渲染...

然后只能给swiper加个key这种蛋疼的操作

什么鬼bug

[ZakaryCode]

非 circular 模式下确实会有该问题，将在下一个版本修复