Taro: 当tabs， swiper封装成组件时，当tabs切换时，swiper的自动轮播会失效，而tabBar的切换则不会

[JokerLoLgrey]

问题描述
[问题描述：站在其它人的角度尽可能清晰地、简洁地把问题描述清楚]
当tabBar， tabs， swiper封装成组件时，当tabs切换时，swiper的自动轮播会失效，而tabBar的切换则不会
复现步骤
[复现问题的步骤]
当tabBar， tabs， swiper封装成组件时，当tabs切换时，swiper的自动轮播会失效，而tabBar的切换则不会
[或者可以直接贴源代码，能贴文字就不要截图]

// 这里可以贴代码
// 这是tabBar的home页面代码

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import Search from '../../components/search/search'
import Tabs from '../../components/tabs/tabs'
import Tab0 from './tabsContent/tabIndex0'
import Tab1 from './tabsContent/tabIndex1'

export default class Index extends Component {
  render () {
    const tabList = [{ title: '推荐',content: <Tab0 /> }, { title: '关注', content: <Tab1 /> }]
    return (
      <View className='home'>
        <Search />
        <Tabs tabList={tabList} />
      </View>
    )
  }
}

// 这是tabs组件代码

import Taro from '@tarojs/taro'
import { AtTabs, AtTabsPane } from 'taro-ui'
import './tabs.scss'

export default class Index extends Taro.Component {
  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
    }
  }
  handleClick (value) {
    this.setState({
      current: value
    })
  }
  render () {
    const tabList = this.props.tabList
    return (
      <AtTabs
        className='my-tabs'
        current={this.state.current}
        tabList={tabList}
        onClick={this.handleClick.bind(this)}
        swipeable
        >
        {
          tabList.map(
            (item, i) => {
              return (
                <AtTabsPane current={this.state.current} index={i} >
                  {item.content}
                </AtTabsPane>
              )
            }
          )
        }
      </AtTabs>
    )
  }
}

//这个是swiper封装的组件

import Taro, { Component } from '@tarojs/taro'
// 引入 Swiper, SwiperItem 组件
import { View, Swiper, SwiperItem } from '@tarojs/components'
export default class Index extends Component {
  render () {
    const swiperData = this.props.swiperData
    const swiperAuto = this.props.swiperAuto
    return (
      <Swiper
        indicatorColor='#999'
        indicatorActiveColor='#333'
        circular
        indicatorDots
        autoplay={swiperAuto}
        >
        {
          swiperData.map(
            item => {
              return (
                <SwiperItem>
                  <View>
                    {item}
                  </View>
                </SwiperItem>
              )
            }
          )
        }
      </Swiper>
    )
  }
}

// 这是封装的tabBar

import Taro from '@tarojs/taro'
import { AtTabBar }  from 'taro-ui'
export default class Index extends Taro.Component {
  constructor () {
    super(...arguments)
    this.state = {
      current: 0
    }
  }
  handleClick (value) {
    this.setState({
      current: value
    })
  }
  render () {
    return (
      <AtTabBar
        selectedColor='#212121'
        color='#BDBDBD'
        fixed={this.props.fixed}
        tabList={this.props.tabList}
        onClick={this.handleClick.bind(this)}
        current={this.state.current}
      />
    )
  }
}

期望行为
切换tabs，轮播图能够自动轮播

报错信息

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

这是正常轮播的h5截图

这是非正常轮播情况

ps: 非正常轮播在滑动一下又能够正常轮播了，非正常的时候没有点亮的点也正常点亮了
系统信息

• 操作系统: [e.g. Windows 10]
• Taro 版本 [e.g. v.0.0.64]
• Node.js 版本 [e.g. v9.0.0]
• 报错平台 [h5, weapp]

补充信息
[可选]
[根据你的调查研究，出现这个问题的原因可能在哪里？]
应该是需要初始化轮播图

[taro-bot[bot]]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[yuche]

swiper 封装的组件 swiperAuto 写一个 defaultProps 为 true

[JokerLoLgrey]

swiper 封装的组件 swiperAuto 写一个 defaultProps 为 true

我之前传了的，不行，我之前是写的是autoplay=true，这个不行，我才改成父组件传值，但是还是不行，这个应该是个bug

[JokerLoLgrey]

今天重新安装了node-modules，问题没有出现了，但是出现了新的问题

[JokerLoLgrey]

@luckyadam

[catXiaoXiao]

+1,我也出现了这个问题！！！！AtTabs 和Swiper 组件同时存在AtTabs 会影响Swiper 组件！！！求解决办法啊

[JokerLoLgrey]

+1,我也出现了这个问题！！！！AtTabs 和Swiper 组件同时存在AtTabs 会影响Swiper 组件！！！求解决办法啊

升级taro和ui版本

[catXiaoXiao]

+1,我也出现了这个问题！！！！AtTabs 和Swiper 组件同时存在AtTabs 会影响Swiper 组件！！！求解决办法啊

升级taro和ui版本

我看了Swiper源码，发现是Swiper组件的生命周期componentWillReceiveProps里每次都会把index = 0
只能在自己封装的组件shouldComponentUpdate做判断禁止不必要的渲染了，或者记录当前current传给Swiper组件。源码如下：

[JokerLoLgrey]

+1,我也出现了这个问题！！！！AtTabs 和Swiper 组件同时存在AtTabs 会影响Swiper 组件！！！求解决办法啊

升级taro和ui版本

我看了Swiper源码，发现是Swiper组件的生命周期componentWillReceiveProps里每次都会把index = 0
只能在自己封装的组件shouldComponentUpdate做判断禁止不必要的渲染了，或者记录当前current传给Swiper组件。源码如下：

升级到最新没有这个问题，但是会有其他bug

[shenghanqin]

@JokerLoLgrey 可以试试看最新版1.3.22的是否改了吗？

[Garfield550]

这不是 DevServer 断开连接的报错吗...

[taro-bot[bot]]

Hello~

您的问题所提供的信息不足，我们无法定位到具体的问题。如果有空的话还请拔冗提供更具体的信息，否则这个 issue 将在 15 天后被自动关闭。

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

Good luck and happy coding~