uni-app swiper组件的transition事件在最后一页切换到第一页时dx位置值异常，先变大再变小

在使用 uni-app 的 swiper 组件时，transition 事件中的 dx 值在最后一页切换到第一页时出现异常（先变大再变小），这通常是由于 swiper 组件的循环模式（circular）导致的。

问题原因

在循环模式下，swiper 组件为了实现无缝滚动，会在第一页之前添加最后一页的副本，在最后一页之后添加第一页的副本。这样在滑动时，swiper 组件会先滑动到副本页，然后再跳转到真正的目标页。这个过程中，dx 值会先增加（滑动到副本页），然后减少（跳转到目标页），从而导致 dx 值异常。

解决方案

1. 禁用循环模式：如果不需要循环滚动，可以将 circular 属性设置为 false，这样可以避免 dx 值异常。

2. 手动处理 dx 值：如果需要使用循环模式，可以在 transition 事件中手动处理 dx 值，忽略跳转过程中的异常值。

3. 使用 animationfinish 事件：如果需要获取滑动结束后的最终位置，可以使用 animationfinish 事件，而不是 transition 事件。

示例代码

<template>
  <swiper :circular="true" [@transition](/user/transition)="onTransition" [@animationfinish](/user/animationfinish)="onAnimationFinish">
    <swiper-item v-for="(item, index) in list" :key="index">
      <view class="swiper-item">{{ item }}</view>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      list: ['Page 1', 'Page 2', 'Page 3']
    };
  },
  methods: {
    onTransition(event) {
      const { dx } = event.detail;
      console.log('Transition dx:', dx);
      // 手动处理 dx 值，忽略异常
      if (Math.abs(dx) > 100) {
        return;
      }
      // 正常处理 dx 值
    },
    onAnimationFinish(event) {
      const { current } = event.detail;
      console.log('Animation finish, current page:', current);
      // 处理滑动结束后的逻辑
    }
  }
};
</script>

<style>
.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>