Merge pull request #481 from Vector-Hope/release-3.6.8-app

feat: swiper组件支持currentItemId属性
handsomeliuyang · Dec 11, 2023 · baff26d · baff26d
2 parents 79d5d79 + 7d75fe1
commit baff26d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/packages/taro-components/src/components/swiper/readme.md b/packages/taro-components/src/components/swiper/readme.md
@@ -10,6 +10,7 @@
 | √        | interval                | Number      | 5000              | 自动切换时间间隔                                             |
 | √        | duration                | Number      | 500               | 滑动动画时长                                                 |
 | √        | current                 | Number      | 0                 | 当前所在滑块的 index                                         |
+| √        | currentItemId           | String      | ""                | 当前所在滑块的 item-id ，不能与 current 被同时指定             |
 | √        | bindchange              | EventHandle |                   | current 改变时会触发 change 事件                             |
 | √        | circular                | Boolean     | false             | 是否采用衔接滑动                                             |
 | ×        | skip-hidden-item-layout | Boolean     | false             | 是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息 |

diff --git a/packages/taro-components/src/components/swiper/swiper.tsx b/packages/taro-components/src/components/swiper/swiper.tsx
@@ -45,6 +45,11 @@ export class Swiper implements ComponentInterface {
    */
   @Prop() current = 0
 
+  /**
+   * 当前所在滑块的 item-id
+   */
+  @Prop() currentItemId = ''
+
   /**
    * 自动切换时间间隔
    */
@@ -100,7 +105,7 @@ export class Swiper implements ComponentInterface {
 
   @Watch('current')
   watchCurrent (newVal) {
-    if (!this.isWillLoadCalled) return
+    if (this.currentItemId || !this.isWillLoadCalled) return
 
     const n = parseInt(newVal, 10)
     if (isNaN(n)) return
@@ -114,6 +119,25 @@ export class Swiper implements ComponentInterface {
     }
   }
 
+  @Watch('currentItemId')
+  watchCurrentItemId (newVal) {
+    const wrapper = this.swiper.$wrapperEl?.[0]
+    let itemIdIndex = 0
+    wrapper.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)').forEach((swiperItem, index) => {
+      // @ts-ignore
+      if (swiperItem.itemId && swiperItem.itemId === newVal) {
+        itemIdIndex = index
+      }
+    })
+    if (this.circular) {
+      if (!this.swiper.isBeginning && !this.swiper.isEnd) {
+        this.swiper.slideToLoop(itemIdIndex) // 更新下标
+      }
+    } else {
+      this.swiper.slideTo(itemIdIndex) // 更新下标
+    }
+  }
+
   @Watch('autoplay')
   watchAutoplay (newVal) {
     if (!this.isWillLoadCalled || !this.swiper) return
@@ -271,12 +295,23 @@ export class Swiper implements ComponentInterface {
       autoplay,
       circular,
       current,
+      currentItemId,
       displayMultipleItems,
       duration,
       interval,
       vertical
     } = this
-
+    let initialSlide = circular ? current + 1 : current
+    if (currentItemId) {
+      let itemIdIndex = 0
+      this.el.querySelectorAll('taro-swiper-item-core:not(.swiper-slide-duplicate)').forEach((swiperItem, index) => {
+        // @ts-ignore
+        if (swiperItem.itemId && swiperItem.itemId === currentItemId) {
+          itemIdIndex = index
+        }
+      })
+      initialSlide = circular ? itemIdIndex + 1 : itemIdIndex
+    }
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const that = this
 
@@ -285,7 +320,7 @@ export class Swiper implements ComponentInterface {
       direction: vertical ? 'vertical' : 'horizontal',
       loop: circular,
       slidesPerView: displayMultipleItems,
-      initialSlide: circular ? current + 1 : current,
+      initialSlide: initialSlide,
       speed: duration,
       observer: true,
       observeParents: true,