Swiper 在H5环境下, 自动轮播不能动态控制

[Liaozzzzzz]

问题描述
使用官方Swiper组件，设置默认自动轮播(autoplay=true)，隔几秒钟后设置为不自动轮播(autoplay=false)，小程序没问题，H5环境无法停止自动轮播，
PS: Taro-UI示例demo在H5环境下也存在该问题。

复现步骤
[复现问题的步骤]

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

期望行为
能动态控制轮播状态

报错信息

[这里请贴上你的完整报错截图或文字]

系统信息

Taro v1.2 及以上版本已添加 taro info 命令，方便大家查看系统及依赖信息，运行该命令后将结果贴下面即可。

• 操作系统: [Windows 10]
• Taro 版本 [v.1.1.13]
• Node.js 版本 [v10.15.3]
• 报错平台 [h5]

补充信息
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[jinjinjin0731]

Taro 版本 [v.1.1.13] 太老了。 更新到最新版本吧

[taro-bot]

Hello~

您的问题楼上已经有了确切的回答，如果没有更多的问题这个 issue 将在 15 天后被自动关闭。

如果您在这 15 天中更新更多信息自动关闭的流程会自动取消，如有其他问题也可以发起新的 Issue。

Good luck and happy coding~

[Liaozzzzzz]

@jinjinjin0731 应该上面打错了, 版本是1.3.13

[jinjinjin0731]

@Liaozzzzzz 贴下你的代码片段。

[Liaozzzzzz]

const Index: FunctionComponent = () => {
  const [autoplay, setAutoPlay] = useState(true);
  console.log(autoplay)
  return (
    <View>
      <Swiper
        interval={3000}
        autoplay={autoplay}
      >
        <SwiperItem><Image src={imgOne}/></SwiperItem>
        <SwiperItem><Image src={imgTwo}/></SwiperItem>
        <SwiperItem><Image src={imgThree}/></SwiperItem>
        <SwiperItem><Image src={imgFore}/></SwiperItem>
      </Swiper>
      <Button onClick={() => setAutoPlay(!autoplay)}>点击切换</Button>
    </View>
  )
};

@jinjinjin0731 H5环境下, autoplay切换为false后, 还是会继续轮播

[Liaozzzzzz]

      if (this.mySwiper.autoplay.running !== nextProps.autoplay) {
        if (nextProps.autoplay) {
          this.mySwiper.autoplay.start();
        } else {
          this.mySwiper.autoplay.stop();
        }
      }

找到问题, 在Swiper下index.js文件的componentWillReceiveProps生命周期内增加以上代码可以解决

[jinjinjin0731]

已合 thx