小程序有swiper的页面跳转webview的bug解决

        小程序中，如果你的页面恰巧有swiper在工作，而恰巧你这个页面可能会跳转到一个有webview的页面，恰巧用户的手机又是4.4的系统版本。那么你可能会遇到跳转到webview页面时，发生闪屏，webview的内容被“穿透”显示了上一级页面的内容的怪现象...那么恭喜你，你和我遇到了一样的问题...

        发生问题的根源是出在swiper身上，这个可能和小程序的渲染原理有关，有兴趣的同学可以去研究一下，只要swiper没有在自动播放，那么这个bug就不会被触发。所以，解决问题的思路也就有了，跳转之前，只需要让swiper停止自动轮播，就不会发生这种bug了。

        步骤一：在你的swiper组件上，绑定autoplay的变量，如下：

/**
 * 页面的初始数据
 */
data: {
  bannerAutoPlay: true
}

 

<swiper indicator-active-color="#fff" indicator-dots="ture" autoplay="{{bannerAutoPlay}}" circular="{{circular}}" interval="3000" duration="3000" previous-margin="{0px" next-margin="0px">
      <block wx:for="{{banner}}" wx:key="item.id" wx:for-item="item" wx:for-index="idx">
        <swiper-item class="swiper-item">
          <image class='banner-img' mode='aspectFill' src='{{item.thumb}}'></image>
        </swiper-item>
      </block>
</swiper>

        步骤二：在跳转逻辑触发的地方，增加以下逻辑，使swiper停止轮播 

menuClick: function(event) {
    //android低版本webview切换时，banner滚动会导致闪屏，这里需要停止banner滚动
    this.setData({
      bannerAutoPlay: false
    });
    // do sth
}

        步骤三：在页面的生命周期回调函数中，设置bannerAutoPlay的值，保证swiper可以正常工作

/**
   * 生命周期函数--监听页面隐藏
   */
onHide: function () {
    this.setData({
      bannerAutoPlay: false
    });
},
  
/**
  * 生命周期函数--监听页面显示
  */
onShow: function () {
    this.setData({
      bannerAutoPlay: true
    });
}

     以上，就可以解决这个让人揪心的bug了，有更好的解决方案，欢迎留言