ソースを参照

Merge branch 'v2' of https://github.com/jdf2e/nutui into v2

Frans 7 年 前
コミット
491bfa7eb8
3 ファイル変更32 行追加53 行削除
  1. 1 0
      sites/doc/app.vue
  2. 28 53
      src/packages/swiper/demo.vue
  3. 3 0
      src/packages/swiper/swiper.scss

+ 1 - 0
sites/doc/app.vue

@@ -263,6 +263,7 @@ export default {
       height: 22px;
       height: 22px;
       min-width: 300px;
       min-width: 300px;
       position: relative;
       position: relative;
+      float:left;
       input {
       input {
         width: 100%;
         width: 100%;
       }
       }

+ 28 - 53
src/packages/swiper/demo.vue

@@ -7,8 +7,8 @@
             ref="demo1"
             ref="demo1"
             
             
         >
         >
-            <div  v-for="(item,index) in dataItem" :key="index"  class="nut-swiper-slide">
-                <span>page{{item.name}}</span>
+           <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
+                <img :src="item.imgSrc"   style="max-width:100%;"/> 
             </div>
             </div>
 
 
         </nut-swiper>
         </nut-swiper>
@@ -22,8 +22,8 @@
             :paginationVisible="true"
             :paginationVisible="true"
             
             
         >
         >
-            <div  v-for="(item,index) in dataItem" :key="index"  class="nut-swiper-slide">
-                <span>page{{item.name}}</span>
+             <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
+                <img :src="item.imgSrc"   style="max-width:100%;" /> 
             </div>
             </div>
 
 
         </nut-swiper>
         </nut-swiper>
@@ -38,17 +38,8 @@
             :paginationVisible="true"
             :paginationVisible="true"
             
             
         >
         >
-            <div  class="nut-swiper-slide gray" >
-                <span>page 1</span>
-            </div>
-            <div  class="nut-swiper-slide gray_1" >
-                <span>page 2</span>
-            </div>
-            <div  class="nut-swiper-slide gray" >
-                <span>page 3</span>
-            </div>
-            <div  class="nut-swiper-slide gray_1" >
-                <span>page 4</span>
+             <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
+                <img :src="item.imgSrc"   style="max-width:100%;" /> 
             </div>
             </div>
 
 
 
 
@@ -57,33 +48,23 @@
          <h4>纵向自动播放</h4>
          <h4>纵向自动播放</h4>
           <nut-swiper
           <nut-swiper
             direction="vertical"
             direction="vertical"
-            ref="dem4"
+            ref="demo4"
             :autoPlay="3000"
             :autoPlay="3000"
-            id="dome4"
         >
         >
-            <div  class="nut-swiper-slide gray" >
-                <span>page 1</span>
-            </div>
-            <div  class="nut-swiper-slide gray_1" >
-                <span>page 2</span>
-            </div>
-            <div  class="nut-swiper-slide gray" >
-                <span>page 3</span>
-            </div>
-            <div  class="nut-swiper-slide gray_1" >
-                <span>page 4</span>
+             <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
+                <img :src="item.imgSrc"   style="max-width:100%;" /> 
             </div>
             </div>
         </nut-swiper>
         </nut-swiper>
 
 
         <h4>滑动懒加载图片</h4>
         <h4>滑动懒加载图片</h4>
         <nut-swiper
         <nut-swiper
             direction="horizontal"
             direction="horizontal"
-            ref="demo4"
+            ref="demo5"
             :lazyLoad="true"
             :lazyLoad="true"
              :paginationVisible="true"
              :paginationVisible="true"
         >
         >
              <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
              <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"/> 
+                <img :data-src="item.imgSrc"  style="max-width:100%;" class="nut-img-lazyload"/> 
             </div>
             </div>
 
 
         </nut-swiper>
         </nut-swiper>
@@ -115,21 +96,24 @@
 
 
                 this.dataImgItem = [
                 this.dataImgItem = [
                     {
                     {
-                        imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t19441/80/1577112624/568821/1ee9b683/5ad064f1Nf41a94b4.jpg'
+                        imgSrc:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
                     },
                     },
                     {
                     {
-                        imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t16798/338/1617130854/542623/4c197f4d/5ad064f1Nce5f69e2.jpg'
+                        imgSrc:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
                     },
                     },
                     {
                     {
-                        imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t22123/348/720079801/233727/23c4c0a4/5b162d64Nc5883413.jpg'
+                        imgSrc:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
                     },
                     },
                     {
                     {
-                        imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t1/27233/9/354/82863/5c090a0eEe2a350d8/aaa6686ce133e364.jpg'
+                        imgSrc:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
                     }
                     }
                 ];
                 ];
                 
                 
                 this.$refs.demo1.updateEvent(1);
                 this.$refs.demo1.updateEvent(1);
                 this.$refs.demo2.updateEvent();
                 this.$refs.demo2.updateEvent();
+                this.$refs.demo3.updateEvent();
+                 this.$refs.demo5.updateEvent();
+
 
 
                 this.$refs.demo4.updateEvent();
                 this.$refs.demo4.updateEvent();
 
 
@@ -146,26 +130,17 @@
             align-items: center;
             align-items: center;
             display: flex;
             display: flex;
         }
         }
-        .nut-swiper-slide:nth-child(1), .nut-swiper-slide:nth-child(3){
-            color:#fff;
-            background:#848689;
-        }   
-        .nut-swiper-slide:nth-child(2), .nut-swiper-slide:nth-child(4){
-            color:#333;
-            background:#ccc;
-        }
-        .gray{
-             color:#fff !important;
-            background:#848689 !important;
-        }
-        .gray_1{
-             color:#333 !important;
-            background:#ccc !important;
-        }
+        // .nut-swiper-slide:nth-child(1), .nut-swiper-slide:nth-child(3){
+        //     color:#fff;
+        //     background:#848689;
+        // }   
+        // .nut-swiper-slide:nth-child(2), .nut-swiper-slide:nth-child(4){
+        //     color:#333;
+        //     background:#ccc;
+        // }
+       
     }
     }
 
 
-    #dome4{
-        height:100px;
-    }
+    
 
 
 </style>
 </style>

+ 3 - 0
src/packages/swiper/swiper.scss

@@ -63,6 +63,9 @@
             margin:0 3px;
             margin:0 3px;
         }
         }
     }
     }
+    img{
+        pointer-events: none;
+    }
 
 
 
 
 }
 }