uni-app swpier组件在vue3模式下设置无效

uni-app swpier组件在vue3模式下设置无效

操作步骤：

<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">  
    <swiper-item>  
        <view class="swiper-item"></view>  
    </swiper-item>  
    <swiper-item>  
        <view class="swiper-item"></view>  
    </swiper-item>  
</swiper>

预期结果：

<div>  
    <slider>  
              ..................  
              <indicator></indicator>  
    </slider>  
</div>

实际结果：

<div>  
    <slider>  
              ..................  

    </div>

bug描述：

在vue3中 nvue类型下，苹果手机真机运行中，swiper的面板指示点，总是会显示，indicator-dots属性设置没有任何的效果，设置颜色也没有任何效果！ 通过调试器观察 其生成的 slider 没有结束标签，其中也不包含子标签 indicator！ 在VUE2中没有这个问题！ 附上 VUE3调试器Elements截图 以及 VUE2 调试器 Elements截图


### 项目信息表
| 项目属性         | 信息               |
|------------------|--------------------|
| 产品分类         | uniapp/App         |
| PC开发环境       | Windows            |
| PC开发环境版本   | win10              |
| HBuilderX类型    | 正式               |
| HBuilderX版本    | 3.4.7              |
| 手机系统         | iOS                |
| 手机系统版本     | iOS 15             |
| 手机厂商         | 苹果               |
| 手机机型         | iPhone11           |
| 页面类型         | nvue               |
| Vue版本          | vue3               |
| 打包方式         | 云端               |
| 项目创建方式     | HBuilderX          |

更多关于uni-app swpier组件在vue3模式下设置无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

我们这里测试是正常的，贴个截图看看效果，再提供一个简单的测试工程
true/false 都会有 indicator节点，如果设置了false，opacity=0，为了兼容Android 动态创建显示问题

更多关于uni-app swpier组件在vue3模式下设置无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在评论区提供了 测试工程，请您看一下

看下截图 在nvue vue3模式下 没有 indicator节点 同时 slider没有结束标签

在vue下正常 在nvue下就不可以呢，附件是测试的

Bug已确认，下版修复

期待修复

3.4.11 已修复

在 uni-app 中使用 swiper 组件时，如果你在 Vue 3 模式下遇到设置无效的问题，可能是因为 Vue 3 的响应式系统与 Vue 2 有所不同，导致某些属性或方法没有正确生效。以下是一些可能的解决方案和注意事项：

1. 检查 swiper 组件的属性

确保你正确设置了 swiper 组件的属性。例如：

<template>
  <swiper
    :autoplay="true"
    :interval="3000"
    :duration="500"
    :circular="true"
  >
    <swiper-item v-for="(item, index) in list" :key="index">
      <view class="swiper-item">{{ item }}</view>
    </swiper-item>
  </swiper>
</template>

<script setup>
import { ref } from 'vue';

const list = ref(['Item 1', 'Item 2', 'Item 3']);
</script>

2. 使用 ref 获取 swiper 实例

如果你需要手动控制 swiper，可以使用 ref 获取 swiper 实例，并在需要时调用其方法。

<template>
  <swiper ref="mySwiper" :autoplay="true">
    <swiper-item v-for="(item, index) in list" :key="index">
      <view class="swiper-item">{{ item }}</view>
    </swiper-item>
  </swiper>
  <button [@click](/user/click)="nextSlide">Next Slide</button>
</template>

<script setup>
import { ref } from 'vue';

const list = ref(['Item 1', 'Item 2', 'Item 3']);
const mySwiper = ref(null);

const nextSlide = () => {
  if (mySwiper.value) {
    mySwiper.value.next();
  }
};
</script>

3. 确保 swiper 组件已正确引入

在 uni-app 中，swiper 组件是内置的，不需要额外引入。但如果你使用了自定义的 swiper 组件，确保它已正确引入并注册。

4. 检查 Vue 3 的响应式系统

Vue 3 的响应式系统与 Vue 2 有所不同，确保你正确使用了 ref 或 reactive 来管理状态。

5. 检查 swiper 组件的版本

如果你使用的是第三方 swiper 组件，确保它支持 Vue 3。某些第三方库可能尚未完全适配 Vue 3。

6. 调试和排查问题

如果以上方法都无法解决问题，可以尝试以下步骤：

  • 检查控制台是否有错误或警告信息。
  • 使用 console.log 输出 swiper 实例，检查其属性和方法是否可用。
  • 尝试简化代码，逐步排查问题。

7. 使用 uni-app 官方文档

参考 uni-app 官方文档中关于 swiper 组件的使用说明，确保你按照官方推荐的方式使用组件。

示例代码

以下是一个完整的示例代码，展示了如何在 Vue 3 模式下使用 swiper 组件：

<template>
  <swiper
    ref="mySwiper"
    :autoplay="true"
    :interval="3000"
    :duration="500"
    :circular="true"
  >
    <swiper-item v-for="(item, index) in list" :key="index">
      <view class="swiper-item">{{ item }}</view>
    </swiper-item>
  </swiper>
  <button [@click](/user/click)="nextSlide">Next Slide</button>
</template>

<script setup>
import { ref } from 'vue';

const list = ref(['Item 1', 'Item 2', 'Item 3']);
const mySwiper = ref(null);

const nextSlide = () => {
  if (mySwiper.value) {
    mySwiper.value.next();
  }
};
</script>

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