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



  • 问题描述

    <!-- 站在其它人的角度尽可能清晰地、简洁地把问题描述清楚 -->
    用到了 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不自动滚动

    报错信息

    ![0_1587366759103_Video_2020-04-20_150700.gif](正在上传 100%)

    系统信息

      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 社区」一起交流




登录后回复