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会自动轮播。复现步骤
- 打开带以上条件的页面
- 点击其中一个tab
- 观察Swiper情况
- 看到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 社区」一起交流
-
官方issue已解决 https://github.com/NervJS/taro/issues/6045
commit地址 https://github.com/NervJS/taro/commit/43bc09129f276314be3e2630d82d7247d5c3e228