uni-app vue3 nvue ios swiper 指示点无法关闭 indicator-dots 属性不生效

示例代码：

    <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>

操作步骤：

官方示例代码

预期结果：

不显示指示点

实际结果：

显示指示点

bug描述：

vue3 nvue swiper 组件 indicator-dots 不生效指定点无法关闭


| 信息类别         | 详细信息               |
|------------------|------------------------|
| 产品分类         | uniapp/App             |
| PC开发环境       | Windows                |
| PC开发环境版本   | win 11                 |
| HBuilderX类型    | 正式                   |
| HBuilderX版本    | 3.4.7                  |
| 手机系统         | iOS                    |
| 手机系统版本     | iOS 15                 |
| 手机厂商         | 苹果                   |
| 手机机型         | pro max 远峰蓝         |
| 页面类型         | nvue                   |
| Vue版本          | vue3                   |
| 打包方式         | 云端                   |
| 项目创建方式     | HBuilderX              |

itying888 1楼•8 天前

3.4.12 已修复 iOS 无效的问题

sinazl 2楼•8 天前

更新后解决了

caililin 3楼•8 天前

在 uni-app 中使用 nvue 开发 iOS 应用时，如果你发现 swiper 组件的 indicator-dots 属性无法关闭，可能是由于以下原因导致的：

1. 检查 `indicator-dots` 属性

确保你在 swiper 组件中正确设置了 indicator-dots 属性，并且它的值为 false。例如：

<swiper :indicator-dots="false">
  <swiper-item>内容1</swiper-item>
  <swiper-item>内容2</swiper-item>
  <swiper-item>内容3</swiper-item>
</swiper>

2. 检查 `nvue` 的兼容性

nvue 是 uni-app 中的原生渲染模式，它使用的是原生组件，而不是 WebView 渲染。因此，某些在 vue 页面中有效的属性或样式在 nvue 中可能不生效。

3. 使用原生组件

如果 indicator-dots 属性在 nvue 中不生效，你可以尝试使用原生组件来实现类似的功能。例如，使用 view 和 image 组件自定义指示点。

4. 检查 `uni-app` 版本

确保你使用的是最新版本的 uni-app，因为旧版本可能存在一些 bug 或兼容性问题。你可以通过以下命令更新 uni-app：

npm update @dcloudio/uni-app

5. 使用 `vue` 页面

如果 nvue 中的 swiper 组件无法满足你的需求，你可以考虑使用 vue 页面，因为 vue 页面中的 swiper 组件功能更加完善。

6. 提交 Issue

如果以上方法都无法解决问题，你可以考虑在 uni-app 的 GitHub 仓库中提交 Issue，向开发者反馈问题。

示例代码

以下是一个自定义指示点的示例代码：

<template>
  <view>
    <swiper @change="onSwiperChange">
      <swiper-item>内容1</swiper-item>
      <swiper-item>内容2</swiper-item>
      <swiper-item>内容3</swiper-item>
    </swiper>
    <view class="indicator">
      <view
        v-for="(item, index) in 3"
        :key="index"
        :class="['dot', { active: currentIndex === index }]"
      ></view>
    </view>
  </view>
</template>

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

<style>
.indicator {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 0 5px;
}

.dot.active {
  background-color: #007aff;
}
</style>