H5端多个taro-ui的AtTabs+Swiper嵌套，点击tab有联动Swiper轮播的bug

[dongpoding]

问题描述

<!-- 站在其它人的角度尽可能清晰地、简洁地把问题描述清楚 -->
用到了 taro-ui的AtTabs 和Swiper两个组件，上下两个AtTabs组件A和B 其中B组件AtTabs的AtTabsPane里面有一个Swiper组件并且多个SwiperItem。
当点击A组件AtTabs的任一tab事件 ，B里面的Swiper会自动轮播。

复现步骤

1. 打开带以上条件的页面
2. 点击其中一个tab
3. 观察Swiper情况
4. 看到Swiper在自动滚动，点一次滚动一次

/**
 * 这段注释后可以贴代码
 * 提供完整可复现的代码和整理好代码格式，有助于我们快速定位问题，节省你我时间
 * 代码提供不全或代码格式混乱的 issues 【有可能会被忽略】
 * 
 * 查看如何插入代码：https://coding.net/help/doc/project/markdown.html#i-5
 */

  render() {
    const tabList = [{ title: '标签页1' }, { title: '标签页2' }, { title: '标签页3' }]
    return (
      <View className='index'>
        <AtTabs current={this.state.current1} tabList={tabList} onClick={this.handleClick1.bind(this)}>
          <AtTabsPane current={this.state.current1} index={0} >
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;' >标签页一的内容</View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current1} index={1}>
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current1} index={2}>
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
          </AtTabsPane>
        </AtTabs>
        <Text>切换以上tabs下面tabs里面的Swiper组件会收影响</Text>
        <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={this.state.current} index={0} >
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;' >
              <Swiper
                className='test-h'
                indicatorColor='#999'
                indicatorActiveColor='#333'
                circular
                indicatorDots
                autoplay={false}>
                <SwiperItem>
                  <View className='demo-text-1'>1</View>
                </SwiperItem>
                <SwiperItem>
                  <View className='demo-text-2'>2</View>
                </SwiperItem>
                <SwiperItem>
                  <View className='demo-text-3'>3</View>
                </SwiperItem>
              </Swiper>
            </View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>
              标签二
            </View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={2}>
            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }

期望行为

点击AtTabs，Swiper不自动滚动

报错信息


系统信息

  Taro CLI 2.1.5 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 10.16.3 - D:\nodejs\node.EXE
      Yarn: 1.19.1 - ~\AppData\Roaming\npm\yarn.CMD
      npm: 6.9.0 - D:\nodejs\npm.CMD

补充信息

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

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

[dongpoding]

官方issue已解决 https://github.com/NervJS/taro/issues/6045

commit地址 https://github.com/NervJS/taro/commit/43bc09129f276314be3e2630d82d7247d5c3e228

paulloo created this issue in NervJS/taro

closed H5端多个taro-ui的AtTabs+Swiper嵌套，点击tab有联动Swiper轮播的bug #6045

0 ZakaryCode committed to NervJS/taro

fix: autoplay 非中断条件下，自动重启