Browse Source

feat: swiper 支持异步切换指定页数

richard1015 4 years ago
parent
commit
13a95b960d
2 changed files with 64 additions and 39 deletions
  1. 4 4
      src/packages/swiper/demo.vue
  2. 60 35
      src/packages/swiper/doc.md

+ 4 - 4
src/packages/swiper/demo.vue

@@ -28,9 +28,9 @@
         <img :src="item.imgSrc" style="max-width:100%;" />
       </div>
     </nut-swiper>
-
-    <div @click="add">下翻页</div>
-    <div @click="sub">上翻页</div>
+    <br />
+    <nut-button @click="add">控制下翻页</nut-button>
+    <nut-button @click="sub">控制上翻页</nut-button>
 
     <h4>纵向自动播放</h4>
     <nut-swiper direction="vertical" :autoPlay="3000" :swiperData="dataImgItem">
@@ -109,7 +109,7 @@ export default {
       console.log(page);
     },
     add() {
-      this.newCurrentPage = this.newCurrentPage + 2;
+      this.newCurrentPage = this.newCurrentPage + 1;
     },
     sub() {
       this.newCurrentPage = this.newCurrentPage - 1;

+ 60 - 35
src/packages/swiper/doc.md

@@ -59,6 +59,9 @@
         <span>page 4</span>
     </div>
 </nut-swiper>
+<br/>
+<nut-button @click="add">控制下翻页</nut-button>
+<nut-button @click="sub">控制上翻页</nut-button>
 ```
 
 纵向自动播放
@@ -102,43 +105,65 @@
 ```
 
 ```javascript
-    export default{
-        data(){
-            return{
-                dataItem:[],
-                dataImgItem:[],
-            }
+export default {
+  data() {
+    return {
+      dataItem: [],
+      dataImgItem: [],
+      newCurrentPage: 1
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.dataItem = [
+        {
+          name: 1
         },
-        mounted(){
-            setTimeout(()=>{
-                this.dataItem = [{
-                    name:1
-                },{
-                    name:2
-                },{
-                    name:3
-                },{
-                    name:4
-                }]
-
-                this.dataImgItem = [
-                    {
-                        imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t19441/80/1577112624/568821/1ee9b683/5ad064f1Nf41a94b4.jpg'
-                    },
-                    {
-                        imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t16798/338/1617130854/542623/4c197f4d/5ad064f1Nce5f69e2.jpg'
-                    },
-                    {
-                        imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t22123/348/720079801/233727/23c4c0a4/5b162d64Nc5883413.jpg'
-                    },
-                    {
-                        imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t1/27233/9/354/82863/5c090a0eEe2a350d8/aaa6686ce133e364.jpg'
-                    }
-                ];
-            },300)
+        {
+          name: 2
+        },
+        {
+          name: 3
+        },
+        {
+          name: 4
         }
-    }
+      ];
 
+      this.dataImgItem = [
+        {
+          imgSrc: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
+        },
+        {
+          imgSrc: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
+        },
+        {
+          imgSrc: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
+        },
+        {
+          imgSrc: '//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
+        }
+      ];
+    }, 300);
+  },
+  methods: {
+    slideChangeEnd(page) {
+      console.log(page);
+    },
+    slideMove(page) {
+      console.log(page);
+    },
+    slideChangeStart(page) {
+      console.log(page);
+    },
+    add() {
+      this.newCurrentPage = this.newCurrentPage + 1;
+    },
+    sub() {
+      this.newCurrentPage = this.newCurrentPage - 1;
+    }
+  }
+};
 ```
 
 ## Prop
@@ -156,7 +181,7 @@
 | lazyLoad | 是否懒加载图片 | Boolean | false
 | lazyLoadUrl | 懒加载的默认展示图片 | String | -
 | swiperData | 异步数据渲染slide时,必须绑定对应数组(v2.1.7以上支持) | Array | -
-
+| newCurrentPage | 当前页数控制,用于异步切换指定页数(v2.2.14以上支持) | Number | 1
 ## Methods
 
 | 字段 | 说明 | 参数