Jacob (#380)

* feat: nutui-swiper组件添加newCurrentPage参数设置swiper页

* feat: swiper组件新增props接收字段newCurrentPage参数,通过该参数可指定swiper滑动到指定页

Co-authored-by: Jacob <[email protected]>
Co-authored-by: richard1015 <[email protected]>

Author: 3 people

src/packages/swiper/demo.vue

@@ -22,12 +22,16 @@
       :loop="true"
       :canDragging="false"
       :paginationVisible="true"
+      :newCurrentPage="newCurrentPage"
     >
       <div v-for="(item, index) in dataImgItem" :key="index" class="nut-swiper-slide ">
         <img :src="item.imgSrc" style="max-width:100%;" />
       </div>
     </nut-swiper>
 
+    <div @click="add">下翻页</div>
+    <div @click="sub">上翻页</div>
+
     <h4>纵向自动播放</h4>
     <nut-swiper direction="vertical" :autoPlay="3000" :swiperData="dataImgItem">
       <div v-for="(item, index) in dataImgItem" :key="index" class="nut-swiper-slide ">
@@ -57,7 +61,8 @@ export default {
   data() {
     return {
       dataItem: [],
-      dataImgItem: []
+      dataImgItem: [],
+      newCurrentPage: 1
     };
   },
   mounted() {
@@ -102,6 +107,12 @@ export default {
     },
     slideChangeStart(page) {
       console.log(page);
+    },
+    add() {
+      this.newCurrentPage = this.newCurrentPage + 2;
+    },
+    sub() {
+      this.newCurrentPage = this.newCurrentPage - 1;
     }
   }
 };

src/packages/swiper/swiper.vue

@@ -64,6 +64,10 @@ export default {
       type: Number,
       default: 1
     },
+    newCurrentPage: {
+      type: Number,
+      default: 1
+    },
     lazyLoad: {
       type: Boolean,
       default: false
@@ -82,12 +86,22 @@ export default {
   watch: {
     swiperData(newValue, oldValue) {
       this.updateEvent();
+    },
+    newCurrentPage(newPage) {
+      let modTempNum = newPage % this.slideEls.length;
+      newPage = modTempNum == 0 ? this.slideEls.length : modTempNum < 0 ? this.slideEls.length + modTempNum : modTempNum;
+
+      if (newPage >= this.currentPage) {
+        this.next(newPage - this.currentPage);
+      } else {
+        this.prev(this.currentPage - newPage);
+      }
     }
   },
   data() {
     return {
       dragging: false,
-      currentPage: this.initPage,
+      currentPage: this.initPage || this.newCurrentPage,
       lastPage: 1,
       translateX: 0,
       translateY: 0,
@@ -108,28 +122,28 @@ export default {
   },
   methods: {
     //下一张
-    next() {
+    next(turnPageCount = 1) {
       let page = this.currentPage;
-      if (page < this.slideEls.length || this.isLoop) {
-        this.setPage(page + 1, true, 'NEXT');
+      if (page + turnPageCount < this.slideEls.length || this.isLoop) {
+        this.setPage(page + turnPageCount, true, 'NEXT');
       } else {
         this._revert();
       }
     },
     //上一张
-    prev() {
+    prev(turnPageCount = 1) {
       let page = this.currentPage;
-      if (page > 1 || this.isLoop) {
-        this.setPage(page - 1, true, 'PREV');
+      if (page - turnPageCount > 1 || this.isLoop) {
+        this.setPage(page - turnPageCount, true, 'PREV');
       } else {
         this._revert();
       }
     },
     setPage(page, isHasAnimation, type) {
       if (page === 0) {
         this.currentPage = this.slideEls.length;
-      } else if (page === this.slideEls.length + 1) {
-        this.currentPage = 1;
+      } else if (page > this.slideEls.length) {
+        this.currentPage = page - this.slideEls.length;
       } else {
         this.currentPage = page;
       }