uni-app nvue中使用swiper组件，:duration=0 :circular="true" 在安卓机上依然有动画效果，苹果手机正常无动画效果。

uni-app nvue中使用swiper组件，:duration=0 :circular=“true” 在安卓机上依然有动画效果，苹果手机正常无动画效果。

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

示例代码：

在安卓手机上点击选项卡切换轮播图的时候依然有动画效果，苹果手机测试正常，无动画效果。

操作步骤：

在安卓手机上点击选项卡切换轮播图的时候依然有动画效果，苹果手机测试正常，无动画效果。

预期结果：

在安卓手机上点击选项卡切换轮播图的时候依然有动画效果，苹果手机测试正常，无动画效果。

实际结果：

在安卓手机上点击选项卡切换轮播图的时候依然有动画效果，苹果手机测试正常，无动画效果。

bug描述：

在安卓手机上点击选项卡切换轮播图的时候依然有动画效果，苹果手机测试正常，无动画效果。


更多关于uni-app nvue中使用swiper组件，:duration=0 :circular="true" 在安卓机上依然有动画效果，苹果手机正常无动画效果。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

文档内说明了duration属性app-nvue不支持，详见文档

更多关于uni-app nvue中使用swiper组件，:duration=0 :circular="true" 在安卓机上依然有动画效果，苹果手机正常无动画效果。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


那ios怎么就支持呢

啥时候 加一下这个功能

这是一个已知的Android平台下nvue swiper组件的兼容性问题。在Android平台上，即使设置了duration=0，swiper切换时仍然会有默认的滑动动画效果，而iOS平台则能正确实现无动画切换。

解决方案可以尝试以下方法：

  1. 使用条件编译针对Android平台处理：
<swiper :duration="duration" :circular="true">
  <!-- 内容 -->
</swiper>

<script>
export default {
  data() {
    return {
      duration: 0
    }
  },
  created() {
    // #ifdef APP-PLUS
    if(plus.os.name.toLowerCase() === 'android') {
      this.duration = 300 // 给Android设置一个合理的过渡时间
    }
    // #endif
  }
}
</script>
  1. 或者使用v-if强制重新渲染swiper组件：
<swiper v-if="showSwiper" :duration="0" :circular="true">
  <!-- 内容 -->
</swiper>

<script>
export default {
  methods: {
    changeTab() {
      this.showSwiper = false
      this.$nextTick(() => {
        this.showSwiper = true
      })
    }
  }
}
</script>
回到顶部