refactor ：优化swiper

1.异步加载不需要主动调用updateEvent事件
2.懒加载方式优化

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "description": "一套轻量级移动端Vue组件库",
   "typings": "dist/types/index.d.ts",
   "main": "dist/nutui.js",

src/packages/swiper/demo.vue

@@ -4,8 +4,7 @@
         <nut-swiper
             :paginationVisibile="true"
             direction="horizontal"
-            ref="demo1"
-            
+            :swiperData="dataImgItem"
         >
            <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
                 <img :src="item.imgSrc"   style="max-width:100%;"/> 
@@ -17,10 +16,9 @@
         <nut-swiper
             :paginationVisibile="true"
             direction="horizontal"
-            ref="demo2"
+            :swiperData="dataImgItem"
             :canDragging="false"
             :paginationVisible="true"
-            
         >
              <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
                 <img :src="item.imgSrc"   style="max-width:100%;" /> 
@@ -32,11 +30,10 @@
          <nut-swiper
             :paginationVisibile="true"
             direction="horizontal"
-            ref="demo3"
+            :swiperData="dataImgItem"
             :loop="true"
             :canDragging="false"
             :paginationVisible="true"
-            
         >
              <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
                 <img :src="item.imgSrc"   style="max-width:100%;" /> 
@@ -48,8 +45,8 @@
          <h4>纵向自动播放</h4>
           <nut-swiper
             direction="vertical"
-            ref="demo4"
             :autoPlay="3000"
+            :swiperData="dataImgItem"
         >
              <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
                 <img :src="item.imgSrc"   style="max-width:100%;" /> 
@@ -59,7 +56,8 @@
         <h4>滑动懒加载图片</h4>
         <nut-swiper
             direction="horizontal"
-            ref="demo5"
+            :paginationClickable="true"
+            :swiperData="dataImgItem"
             :lazyLoad="true"
              :paginationVisible="true"
              @slideChangeEnd="slideChangeEnd"
@@ -81,7 +79,7 @@
     export default{
         data(){
             return{
-                dataItem:null,
+                dataItem:[],
                 dataImgItem:[],
             }
         },
@@ -112,14 +110,6 @@
                     }
                 ];
                 
-                this.$refs.demo1.updateEvent(1);
-                this.$refs.demo2.updateEvent();
-                this.$refs.demo3.updateEvent();
-                this.$refs.demo5.updateEvent();
-
-
-                this.$refs.demo4.updateEvent();
-
             },300)
         },
         methods:{

src/packages/swiper/doc.md

@@ -10,8 +10,8 @@
 <nut-swiper
     :paginationVisible="true"
     direction="horizontal"
+    :swiperData="dataItem"
     ref="demo1"
-    
 >
     <div  v-for="(item,index) in dataItem" :key="index"  class="nut-swiper-slide">
         <span>page{{item.name}}</span>
@@ -24,10 +24,10 @@
 ```html
 <nut-swiper
     direction="horizontal"
-    ref="demo2"
+    :swiperData="dataItem"
     :canDragging="false"
     :paginationVisible="true"
-    
+    ref="demo2"
 >
     <div  v-for="(item,index) in dataItem" :key="index"  class="nut-swiper-slide">
         <span>page{{item.name}}</span>
@@ -41,11 +41,10 @@
 ```html
 <nut-swiper
     direction="horizontal"
-    ref="demo3"
     :loop="true"
     :canDragging="false"
     :paginationVisible="true"
-    
+    ref="demo3"
 >
     <div  class="nut-swiper-slide gray" >
         <span>page 1</span>
@@ -67,9 +66,8 @@
 ```html
  <nut-swiper
     direction="vertical"
-    ref="dem4"
     :autoPlay="3000"
-    id="dome4"
+    ref="demo4"
 >
     <div  class="nut-swiper-slide gray" >
         <span>page 1</span>
@@ -91,9 +89,10 @@
 ```html
 <nut-swiper
     direction="horizontal"
-    ref="demo4"
+    :swiperData="dataImgItem"
     :lazyLoad="true"
-        :paginationVisible="true"
+    :paginationVisible="true"
+    ref="demo5"
 >
         <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
         <img :data-src="item.imgSrc"   style="max-width:100%; max-height:100%" class="nut-img-lazyload"/> 
@@ -106,7 +105,7 @@
     export default{
         data(){
             return{
-                dataItem:null,
+                dataItem:[],
                 dataImgItem:[],
             }
         },
@@ -136,12 +135,6 @@
                         imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t1/27233/9/354/82863/5c090a0eEe2a350d8/aaa6686ce133e364.jpg'
                     }
                 ];
-                
-                this.$refs.demo1.updateEvent(1);
-                this.$refs.demo2.updateEvent();
-
-                this.$refs.demo4.updateEvent();
-
             },300)
         }
     }
@@ -162,6 +155,7 @@
 | initPage | 设置初始时候显示的页 | Number | 1
 | lazyLoad | 是否懒加载图片 | Boolean | false
 | lazyLoadUrl | 懒加载的默认展示图片 | String | -
+| swiperData | 异步数据渲染slide时，必须绑定对应数组 | Array | -
 
 ## Methods
 
@@ -170,7 +164,6 @@
 | next | 去下一页 | -
 | prev | 去上一页 | -
 | setPage |  设置当前显示第几页 | number
-| updateEvent | 异步数据渲染slide，都需要重新调用方法，绑定事件，如【横向无缝滑动】this.$refs.demo1.update(1)。也提供设置初始页面 | number
 
 ## Events
 | 字段 | 说明 | 回调参数 

src/packages/swiper/swiper.scss

@@ -17,6 +17,33 @@
         width:100%;
         height:100%;
         cursor: default;
+        position: relative;
+        @keyframes nut-preloader-spin{100%{transform:rotate(360deg)}}
+        .nut-lazy{
+            &.img{
+                width: 100%;
+                height: 100%;
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+            }
+            &.preloader{
+                width: 42px;
+                height: 42px;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                margin-left: -21px;
+                margin-top: -21px;
+                z-index: 10;
+                transform-origin: 50%;
+                animation: nut-preloader-spin 1s infinite linear;
+                box-sizing: border-box;
+                border: 4px solid #fff;
+                border-radius: 50%;
+                border-top-color: transparent;
+            }
+        }
+        
     }
     &.horizontal .nut-swiper-wrap{
         flex-direction: row;

src/packages/swiper/swiper.vue

@@ -73,7 +73,18 @@ export default {
         },
         lazyLoadUrl:{
             type:String,
-            default:'//img10.360buyimg.com/n1/s375x375_jfs/t1/811/7/9399/13031/5bab45c8E2614735e/a4e343007567442c.png'
+            default:''
+        },
+        swiperData:{
+            type:[Array],
+            default:function(){
+                return [];
+            }
+        }
+    },
+    watch:{
+        swiperData(newValue,oldValue){
+            this.updateEvent();
         }
     },
     data(){
@@ -139,7 +150,24 @@ export default {
             return this.direction === HORIZONTAL;
         },
         isVertical(){
-            return this.direction === VERTICAL;
+            return this.direction === VERTICAL; 
+        },
+        renderLazyDom(slideEls){
+            slideEls.forEach((item,index)=>{
+                let src = item.getAttribute('data-src');
+                if(item.className!="nut-swiper-slide nut-swiper-slide-selected"){
+                    var dom=document.createElement("div");
+                     //jd 图片占位图)
+                    if(this.lazyLoadUrl){ 
+                        dom.style.backgroundImage=`url('${this.lazyLoadUrl}')`;
+                        dom.className="nut-lazy img";
+                    }else{
+                        dom.className="nut-lazy preloader";
+                    }
+                    item.appendChild(dom);
+                }
+            })
+            return true;
         },
         updateEvent(pageSize){
             this.$nextTick(()=>{
@@ -157,7 +185,7 @@ export default {
                     }
                     this.isLoop && this._createLoop(); 
                     this.setPage(this.currentPage, false);
-                    this.lazyLoad  && this._imgLazyLoad();
+                    this.lazyLoad && this.renderLazyDom(this.slideEls) && this._imgLazyLoad();
                 },0)
                 
 
@@ -209,7 +237,6 @@ export default {
             //let  isQuickAction = (new Date().getTime() - this.startTime) < 200;
             if(this.canDragging && this._computePreventDefault(e)){
                 e.preventDefault();
-                this.lazyLoad && this._imgLazyLoad();
                 this._setTranslate(this.startTranslate + this.delta);
                 this.$emit('slideMove',this._getTranslate(),this.$el);
             }
@@ -328,14 +355,16 @@ export default {
                 if(type == 1){
                     imgLazyLoadEl = this.slideEls[this.currentPage - 1].querySelectorAll('.nut-img-lazyload');
                 }
-               
                 imgLazyLoadEl.forEach((item,index)=>{
                     if(!this._checkInView(item) && type != 1) return;
                     let src = item.getAttribute('data-src');
-                    item.src = this.lazyLoadUrl;//jd 图片占位图
                     let img = new Image();
                     img.src = src;
                     img.onload = ()=>{
+                        let lazyLoadingEle = item.parentElement.querySelector('.nut-lazy');
+                        if(lazyLoadingEle){
+                            item.parentElement.removeChild(lazyLoadingEle);
+                        }
                         item.src = src;
                         item.classList.remove('nut-img-lazyload');
                     }