同一页面多个swiper出现错乱问题

第一次使用swiper出现的各种奇葩问题，搞得头疼

1.同一页面存在多个swiper时，不能以通用的id或者class为定位标准，容易出现同时找到多个对象的问题，需要确保id和class的唯一性  

                         
2.动态创建swpier，append到html中时，swiper-slide必须放在swiper-wrapper中，否则初始化后，会因为结构不完整报错

  

    
slider1
  

3.动态创建swiper的slide页时，使用源生的swiper.appendSlide()代替replace()，执行效率更高，并且不容易出现错乱

项目案例：产线屏-电子展板与人员绩效多个tab来回切换时，电子展板初始化后，可以正常上下页切换刷新；从人员绩效切换回来的时候，出现无法下页切换，之能上页切换的问题，F12查看Elements发现swiper的结构发生变化，猜测由于replace()替换前后的清空，并未完全清空上一次加载的slide，导致多个slide重复，无法出现切换下页的情况

4.销毁swiper

if(window.swiper){
       //销毁swiper
       window.swiper.destory(false);
}

5.同一网页 多个tab，隐藏显示多个swiper出现的不同问题

例如：tab1：图片轮播mySwiper1

    tab2：消息信息轮播mySwiper2

问题：多个swiper同时使用pagination（分页器的图标），swiper容易出现错乱

解决方案：定义类名唯一的pagination

var picObject = new Array();//存放图片地址的数组
picObject.push('http://123.com/1.jpg');
if(window.mySwiper1){
     window.mySwiper1.destroy;
}
window.mySwiper1 = new swiper( '.swiper-container1',{
     initialSlide:picOject.length>0?picObject.length+1:0,

     //initalSlide： swiper中设置初始化时的slide索引属性，默认是0当前swiper中包含多张图片，初始化之后显示在最后一个，
     //此时怀疑该属性是否未生效，在onSlideChangeEnd事件，打印出swiper.activeIndex发现activeIndex排序是乱的，并且不包含0，
     //在swiper中之放入一张图片 ,loop循环开启的情况下 ，查看activeIndex  ，此时输出的activeIndex = 1,
     //重新放入多张图片，默认显示的最后一个分页器的activeIndex = 1, 第一张图片的activeIndex = picObject.length+1 ，
     //想要初始化的时候默认显示第一页，设置如上属性
     loop：true,
     autoplay:1000*2, //图片循环速率
     autoplayDIsableOnInteraction:false,
     pagination:'.swiper-pagination-pic',
     paginationClickable：true,
     observer:true,
     observerParents:false,jiejue
     resistianceRatio:0,
     iOSEdgeSwipeDetection：true
})
window.mySwiper1.appendSlide(picObject);
window.mySwiper1.update();
window.mySwiper1.startAutoplay();