uni-app swiper组件在app切换时动画反向问题：希望0-2是右滑动画，2-0是左滑动画，但现在是反过来的，无法进行无缝衔接

开发环境	版本号	项目创建方式
Mac	macOS 12.6.3	HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：macOS 12.6.3

HBuilderX类型：正式

HBuilderX版本号：3.98

手机系统：Android

手机系统版本号：Android 13

手机厂商：华为

手机机型：nova 10

页面类型：vue

vue版本：vue2

打包方式：云端

操作步骤：
- swiper  修改当前下标,当到2变0时,然后是无缝衔接的

预期结果：
- 希望 0-2 是右滑的动画。2-0是左滑的动画,  现在是会反过来。没法进行无缝衔接

实际结果：
- 0-2 是左滑的动画,2-0是右滑的动画,

bug描述：
- swiper  在app 切换时,希望 0-2 是右滑的动画。2-0是左滑的动画,  现在是会反过来。没法进行无缝衔接

h691938207 1楼•9 天前

因为你开了无缝衔接肯定是向最近的方向滚动的。如果你不想要这种效果的话可以使用动态circular控制滚动方向参考代码片段 <template>
<view>
<swiper :current=“current” :indicator-dots=“true” :circular=“circular” @animationfinish=“animationfinish”>
<swiper-item>
<view class="swiper-item">0</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">1</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">2</view>
</swiper-item>
</swiper>
<button @click=“setCurrent”>current—{{current}}</button>
</view>
</template>

ionicwang 2楼•9 天前

如果开启自动轮播,那是可以同一个方向,但是问题了 2-1、1-0、0-2 就没法实现了

sinazl 3楼•9 天前

所以我希望官方可以给一个方案,或者修改下,0-1、1-2、2-0 滑动方向是一样的

caililin 4楼•9 天前

我就是要向最近的方向滚动,h5是没问题,app nvue 就是有问题, app vue 我没有试, app nvue比如我0-1、1-2、2-0我希望是同一个方向,但是0-1和1-2是同一个方向,2-0和前面两个是反方向

phonegap100 5楼•9 天前

你上面页面类型标示是 vue类型页面所以我用的是vue 我刚试了nvue确实是你所描述的效果

nodeper 6楼•9 天前

可以去插件市场找一个轮播图插件修改一下应该能做到你说的效果

sinazl 7楼•9 天前

回复爱豆豆: 就是希望官方能修复这个bug,因为很多地方用到 swiper 切换一屏一屏的

zlyuanteng 8楼•9 天前

在 uni-app 中使用 swiper 组件时，如果你希望在切换时动画方向符合预期（例如从 0 到 2 是右滑，从 2 到 0 是左滑），但实际效果相反，可能是因为 swiper 的默认行为导致的。swiper 组件默认是循环滚动的，因此在某些情况下，动画方向可能会不符合预期。

解决方案

禁用循环滚动
如果你不需要循环滚动，可以通过设置 circular 属性为 false 来禁用循环滚动。这样可以确保动画方向符合预期。
```
<swiper :circular="false">
  <swiper-item>0</swiper-item>
  <swiper-item>1</swiper-item>
  <swiper-item>2</swiper-item>
</swiper>
```

手动控制动画方向
如果你需要循环滚动，可以通过监听 swiper 的 change 事件，手动控制动画方向。你可以根据当前索引和目标索引来判断动画方向，并应用相应的样式或逻辑。

<template>
  <swiper :current="current" @change="onSwiperChange">
    <swiper-item>0</swiper-item>
    <swiper-item>1</swiper-item>
    <swiper-item>2</swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
    };
  },
  methods: {
    onSwiperChange(e) {
      const newIndex = e.detail.current;
      const oldIndex = this.current;

      if (newIndex > oldIndex || (newIndex === 0 && oldIndex === 2)) {
        // 右滑动画
        console.log('右滑');
      } else {
        // 左滑动画
        console.log('左滑');
      }

      this.current = newIndex;
    },
  },
};
</script>

自定义动画
如果你需要更复杂的动画效果，可以考虑使用 transition 或 animation 来自定义动画。你可以根据 swiper 的 change 事件来动态添加或移除动画类。

<template>
  <swiper :current="current" @change="onSwiperChange">
    <swiper-item :class="{'slide-right': isSlideRight, 'slide-left': isSlideLeft}">0</swiper-item>
    <swiper-item :class="{'slide-right': isSlideRight, 'slide-left': isSlideLeft}">1</swiper-item>
    <swiper-item :class="{'slide-right': isSlideRight, 'slide-left': isSlideLeft}">2</swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      isSlideRight: false,
      isSlideLeft: false,
    };
  },
  methods: {
    onSwiperChange(e) {
      const newIndex = e.detail.current;
      const oldIndex = this.current;

      if (newIndex > oldIndex || (newIndex === 0 && oldIndex === 2)) {
        this.isSlideRight = true;
        this.isSlideLeft = false;
      } else {
        this.isSlideRight = false;
        this.isSlideLeft = true;
      }

      this.current = newIndex;
    },
  },
};
</script>

<style>
.slide-right {
  animation: slideRight 0.5s;
}

.slide-left {
  animation: slideLeft 0.5s;
}

[@keyframes](/user/keyframes) slideRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

[@keyframes](/user/keyframes) slideLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
</style>