swiper是微信小程序的一个滑动组件，非常重要。如果只是做简单的轮播图而不进行复杂的逻辑，直接可以使用，甚至不需要知道组件的方法。但是小根据滑动进行判断状态的时候 就会出现问题。(实现其效果代码在下面)

问题：

当切换到其他小程序浏览一段时间再次返回自己的小程序 发现swiper在左右频繁的抖动

官方给出的解决方案：

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

tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起

而我们的bindChange确实使用了setData()，来保证swiper组件的current属性与我们的this.data.index同步。为什么要有this.data.index这个变量？是因为我们要获得当前的页数进行其他的操作。获取当前索引来判断不是当前的image 进而对图片追加样式。至此我们需要频繁的用setData（）进行赋值。在官方论坛中 有说道 “请不要在change事件中使用setData对current进行赋值”

我的解决办法是分开赋值，做到他们互不干涉

index.js

data: {
    background: ['../../image/1.jpg', '../../image/2.jpg', '../../image/3.jpg'],
    indicatorDots: false,
    vertical: false,
    autoplay: true,
    circular: true,
    interval: 5000,
    duration: 500,
    previousMargin: 10,
    nextMargin: 10,
    swiperCurrent:0,
    index1:0,
    gonggao:['这是一个很坑的公告1','这是一个很坑的公告2']
  },
  //自动播放触发的事件
  swiperChange:function(e){
   this.setData({
        index1: e.detail.current
   })
  },
//滑动图片切换 
 chuangEvent: function (e) { 
  this.setData({
        index1: e.currentTarget.id
  })
 },

index.wxml  

<swiper class="bigbox"
        indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
        interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px" current='{{swiperCurrent}}' bindchange="swiperChange">
        <block wx:for="{{background}}" wx:key="*this" >
          <swiper-item class="box">
              <image src="{{item}}" id="{{index}}" class="slide-image{{index == index1 ? ' active' : ''}}" bindchange="chuangEvent"></image>
          </swiper-item>
        </block>
      </swiper>
    </view>

index.wxss

.page-section {
  height: 365rpx
}
.bigbox {
  width: 100%;
  height: 365rpx;
  background: #fff;
}
.box {
  height: 400rpx;
}
.slide-image {
  position: absolute;
  width: 100%;
  height: 280rpx;
  border-radius: 15rpx;
  z-index: 5;
  opacity: 0.7;
  top: 10%;
}
.active {
  opacity: 1;
  z-index: 10;
  height: 340rpx;
  top: 2%;
  transition: all .2s ease-in 0s;
}

实现3D效果的swiper代码：home.zip