小程序切換輪播圖顯示空白的問題和輪播圖顯示不全的問題

一、小程序切換輪播圖顯示空白的問題和輪播圖顯示不全的問題

1、小程序切換輪播圖顯示空白的問題

技術棧，taro編譯的小程序，場景： 首頁幾個tab切換，默認第一個tab輪播圖有數據，切換的時候后面的輪播圖有的時候顯示空白，請看：

首先父組件到子組件的值傳過來了，自組件img src路徑也有值，復制出來地址瀏覽器，顯示沒問題，路徑問題排除

第一個tab三張輪播圖，第二個兩張輪播圖，其他的tab都是一張，每個tab都從 數組形式傳值過來的。有數據這是怎么回事，於是翻翻小鄭許官網看到這

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

current number 0 否 當前所在滑塊的 index 1.0.0

然后我驗證一下是不是，每次curent都是0的時候沒問題，  1或者2的時候后面只有一張輪播圖的時候顯示空白，回家地鐵刪先驗證一下果然是，明白了咩？

為了驗證了一下，在上面多家一行文字， 1或者2的時候文字都沒顯示，說明這一塊都沒顯示，就是索引的位置，所以當每次切換tab把索引重制為0，當然還可以優化一下，只有切換每次傳入數據長度不一樣的在把current重置為0

 

 

讓我再來看一下react的生命周期

附上生命周期的鏈接

https://www.jianshu.com/p/b331d0e4b398

官網：https://zh-hans.reactjs.org/docs/react-component.html#mounting

 componentWillReceiveProps(nextProps) {
    // 只要 props.email 改變，就改變 state
    const {carousel} = this.props
    if (nextProps.carousel.length !== carousel.length) {
      this.setState({
        current: 0
      });
    }
  }

 以上這樣解決了空白的問題

2、輪播圖顯示不全的問題

當圖片圖片顯示不全的問題

carouse__wrap-swiper  的高度設置固定值，別忘了image的高度設置height:100%;

<View className='carouse__wrap'>
  <Swiper
    className='carouse__wrap-swiper'
    circular
    autoplay
    current={this.state.current}
    onChange={this.swiperChange.bind(this)}
  >
    
    { swiperItems }
  </Swiper>
  
  <View className='swiper__dot'>
    { dots }
  </View>
  
</View>

 

 

附上小程序其他的輪播圖問題鏈接：

https://developers.weixin.qq.com/community/develop/doc/0000c24a5200100cb2695c2275b400

https://developers.weixin.qq.com/community/develop/doc/000062798bce102782895c3e251000