Feat swiper display multi and changestart

.agents/skills/mpx2rn/references/rn-template-reference.md

@@ -796,7 +796,7 @@ Mpx 输出 RN 内置支持了大部分常用的基础组件，详情见下方文
 
 | 属性名 | 类型 | 默认值 | 说明 |
 | --- | --- | --- | --- |
-| indicator-dots | boolean | `false` | 是否显示面板指示点 |
+| indicator-dots | boolean | `false` | 是否显示面板指示点，数量与 `swiper-item` 一致，多项展示时从 `current` 开始的 `display-multiple-items` 个指示点同时高亮 |
 | indicator-color | color | `rgba(0, 0, 0, .3)` | 指示点颜色 |
 | indicator-active-color | color | `#000000` | 当前选中的指示点颜色 |
 | indicator-width | number |  | 指示点宽度 |
@@ -805,13 +805,14 @@ Mpx 输出 RN 内置支持了大部分常用的基础组件，详情见下方文
 | indicator-radius | number |  | 指示点圆角 |
 | indicator-margin | number |  | 指示点外边距 |
 | autoplay | boolean | `false` | 是否自动切换 |
-| current | number | `0` | 当前所在滑块的 index |
+| current | number | `0` | 当前所在滑块的 index，越界时会裁剪到合法范围 |
 | interval | number | `5000` | 自动切换时间间隔 |
 | duration | number | `500` | 滑动动画时长 |
 | circular | boolean | `false` | 是否采用衔接滑动 |
 | vertical | boolean | `false` | 滑动方向是否为纵向 |
 | previous-margin | string | `0` | 前边距，可用于露出前一项的一小部分，接受 px |
 | next-margin | string | `0` | 后边距，可用于露出后一项的一小部分，接受 px |
+| display-multiple-items | number | `1` | 同时显示的滑块数量，非有限值或非正数按 `1` 处理，小数向下取整 |
 | scale | boolean | `false` | 滑动时是否开启前后元素缩小,默认是缩放 0.7 倍, 暂不支持自定义 |
 | easing-function | string | `linear` | 支持 linear、easeInCubic、easeOutCubic、easeInOutCubic |
 | simultaneous-handlers | array\<object> | `[]` | RN 环境特有属性，主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 swiper 组件 |
@@ -823,6 +824,7 @@ Mpx 输出 RN 内置支持了大部分常用的基础组件，详情见下方文
 | 事件名 | 说明 |
 | --- | --- |
 | change | current 改变时会触发 change 事件，`event.detail = {current, source}` |
+| changestart | swiper 切换开始时会触发 changestart 事件，`event.detail = {current}` 中的 current 为目标索引 |
 
 ### swiper-item
 

docs-vitepress/guide/rn/component.md

@@ -152,7 +152,7 @@
 
 | 属性名                   | 类型     | 默认值              | 说明                                 |
 | ----------------------- | ------- | ------------------  | ------------------------------------|
-| indicator-dots          | boolean | `false`             | 是否显示面板指示点                     |
+| indicator-dots          | boolean | `false`             | 是否显示面板指示点，数量与 `swiper-item` 一致，多项展示时从 `current` 开始的 `display-multiple-items` 个指示点同时高亮 |
 | indicator-color         | color   | `rgba(0, 0, 0, .3)` | 指示点颜色                            |
 | indicator-active-color  | color   | `#000000`           | 当前选中的指示点颜色                   |
 | indicator-width         | number  |                     | 指示点宽度             |
@@ -161,13 +161,14 @@
 | indicator-radius        | number  |                     | 指示点圆角             |
 | indicator-margin        | number  |                     | 指示点外边距           |
 | autoplay                | boolean | `false`             | 是否自动切换                          |
-| current                 | number  | `0`                 | 当前所在滑块的 index                  |
+| current                 | number  | `0`                 | 当前所在滑块的 index，越界时会裁剪到合法范围 |
 | interval                | number  | `5000`              | 自动切换时间间隔                       |
 | duration                | number  | `500`               | 滑动动画时长                          |
 | circular                | boolean | `false`             | 是否采用衔接滑动                       |
 | vertical                | boolean | `false`             | 滑动方向是否为纵向                      |
 | previous-margin         | string  | `0`                 | 前边距，可用于露出前一项的一小部分，接受px |
 | next-margin             | string  | `0`                 | 后边距，可用于露出后一项的一小部分，接受px |
+| display-multiple-items  | number  | `1`                 | 同时显示的滑块数量，非有限值或非正数按 `1` 处理，小数向下取整 |
 | scale                   | boolean  | `false`            | 滑动时是否开启前后元素缩小,默认是缩放0.7倍, 暂不支持自定义 |
 | easing-function         | string  | `linear`      | 支持 linear、easeInCubic、easeOutCubic、easeInOutCubic|
 | simultaneous-handlers              | array\<object>|   `[]`          | RN环境特有属性，主要用于组件嵌套场景，允许多个手势同时识别和处理并触发，这个属性可以指定一个或多个手势处理器，处理器支持使用 this.$refs.xxx 获取组件实例来作为数组参数传递给 swiper 组件|
@@ -179,9 +180,10 @@
 
 事件
 
-| 事件名           | 说明                |
-| ----------------| ------------------ |
+| 事件名        | 说明                |
+| ------------| ------------------ |
 | change| current 改变时会触发 change 事件，`event.detail = {current, source}`|
+| changestart| swiper 切换开始时会触发 changestart 事件，`event.detail = {current}` 中的 current 为目标索引 |
 
 ### swiper-item
 仅可放置在swiper组件中，宽高自动设置为100%。

packages/webpack-plugin/lib/platform/template/wx/component-config/swiper.js

@@ -67,7 +67,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(display-multiple-items|snap-to-edge|easing-function)$/,
+        test: /^(snap-to-edge|easing-function)$/,
         ios: iosPropLog,
         android: androidPropLog,
         harmony: harmonyPropLog

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper-utils.ts

@@ -0,0 +1,122 @@
+export function normalizeDisplayMultipleItems (value: number | string | undefined) {
+  const displayMultipleItems = Math.floor(Number(value))
+  return Number.isFinite(displayMultipleItems) ? Math.max(1, displayMultipleItems) : 1
+}
+
+export function getSwiperMaxIndex (childrenLength: number, displayMultipleItems: number, circular: boolean) {
+  'worklet'
+  return Math.max(0, childrenLength - (circular ? 1 : displayMultipleItems))
+}
+
+export function normalizeSwiperCurrent (
+  current: number | string,
+  childrenLength: number,
+  displayMultipleItems: number,
+  circular: boolean
+) {
+  const currentIndex = Math.floor(Number(current))
+  if (!Number.isFinite(currentIndex)) return 0
+  return Math.min(Math.max(0, currentIndex), getSwiperMaxIndex(childrenLength, displayMultipleItems, circular))
+}
+
+export function getSwiperStep (
+  mainAxisSize: number,
+  previousMargin: number,
+  nextMargin: number,
+  displayMultipleItems: number
+) {
+  const step = (mainAxisSize - previousMargin - nextMargin) / displayMultipleItems
+  return Number.isFinite(step) && step > 0 ? step : 0
+}
+
+export function getSwiperPatchElmNum (
+  circular: boolean,
+  childrenLength: number,
+  displayMultipleItems: number,
+  hasEdgeMargin: boolean,
+  viewportSize: number,
+  step: number
+) {
+  if (!circular || childrenLength <= 1) return 0
+  const basePatchElmNum = displayMultipleItems + (hasEdgeMargin ? 1 : 0)
+  const viewportItemCount = Math.ceil(viewportSize / step)
+  return Number.isFinite(viewportItemCount)
+    ? Math.max(basePatchElmNum, viewportItemCount)
+    : basePatchElmNum
+}
+
+export function getCircularIndex (index: number, childrenLength: number) {
+  'worklet'
+  if (!childrenLength) return 0
+  return ((index % childrenLength) + childrenLength) % childrenLength
+}
+
+export function isSwiperDotActive (
+  dotIndex: number,
+  currentIndex: number,
+  displayMultipleItems: number,
+  childrenLength: number,
+  circular: boolean
+) {
+  'worklet'
+  if (dotIndex < 0 || dotIndex >= childrenLength) return false
+  const activeDotCount = Math.min(displayMultipleItems, childrenLength)
+  if (!circular) return dotIndex >= currentIndex && dotIndex < currentIndex + activeDotCount
+  return getCircularIndex(dotIndex - currentIndex, childrenLength) < activeDotCount
+}
+
+export function getCircularBoundary (
+  moveToOffset: number,
+  childrenLength: number,
+  patchElmNum: number,
+  step: number,
+  viewportSize: number
+) {
+  'worklet'
+  if (childrenLength <= 0 || step <= 0) {
+    return {
+      isBoundary: false,
+      resetOffset: 0
+    }
+  }
+  const boundaryStart = 0
+  const boundaryEnd = Math.max(
+    -(childrenLength + patchElmNum) * step,
+    -((childrenLength + patchElmNum * 2) * step - viewportSize)
+  )
+  const cycleSize = childrenLength * step
+  if (moveToOffset < boundaryEnd) {
+    return {
+      isBoundary: true,
+      resetOffset: moveToOffset + Math.ceil((boundaryEnd - moveToOffset) / cycleSize) * cycleSize
+    }
+  }
+  if (moveToOffset > boundaryStart) {
+    return {
+      isBoundary: true,
+      resetOffset: moveToOffset - Math.ceil((moveToOffset - boundaryStart) / cycleSize) * cycleSize
+    }
+  }
+  return {
+    isBoundary: false,
+    resetOffset: 0
+  }
+}
+
+export function getSwiperResistanceOffset (
+  offset: number,
+  translation: number,
+  transdir: number,
+  maxOffset: number,
+  step: number
+) {
+  'worklet'
+  const moveToOffset = offset + translation
+  const maxOverDrag = step / 2
+  const overDrag = transdir < 0 ? Math.abs(moveToOffset - maxOffset) : Math.abs(moveToOffset)
+  const resistance = Math.max(0.1, Math.min(0.5, 1 - overDrag / maxOverDrag))
+  const adjustOffset = offset + translation * resistance
+  return transdir < 0
+    ? Math.max(adjustOffset, maxOffset - maxOverDrag)
+    : Math.min(adjustOffset, maxOverDrag)
+}