uni-app cli nvue swiper 在ios下indicator-dots无效

uni-app cli nvue swiper 在ios下indicator-dots无效

开发环境 版本号 项目创建方式
PC开发环境 Windows CLI
手机系统 iOS
vue vue3

示例代码：

<swiper :indicator-dots="false">  
..../  
</swiper>

操作步骤：

设置:indicator-dots="false"在ios无端，无法隐藏指示点

预期结果：

隐藏指示点

实际结果：

无法隐藏指示点

bug描述：

swiper 在ios下indicator-dots无效,设置为false时，依然显示指示点。

相关链接：


更多关于uni-app cli nvue swiper 在ios下indicator-dots无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

问题确认，已加分，感谢反馈！

更多关于uni-app cli nvue swiper 在ios下indicator-dots无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


Bug已确认，下版修复

3.4.11 已修复

在 uni-app 中使用 nvue 开发时，swiper 组件的 indicator-dots 属性在 iOS 下可能无效。这通常是由于 nvue 的渲染机制与 vue 页面不同，导致某些属性在特定平台上表现不一致。

解决方案

  1. 使用自定义指示器： 如果 indicator-dots 在 iOS 下无效，可以考虑使用自定义的指示器来实现类似的效果。你可以通过监听 swiper 的 change 事件来动态更新指示器的状态。

    <template>
  <view>
    <swiper :current="current" @change="onSwiperChange">
      <swiper-item v-for="(item, index) in list" :key="index">
        <view class="swiper-item">{{ item }}</view>
      </swiper-item>
    </swiper>
    <view class="indicator">
      <view
        v-for="(item, index) in list"
        :key="index"
        :class="['dot', index === current ? 'active' : '']"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      list: ['Page 1', 'Page 2', 'Page 3']
    };
  },
  methods: {
    onSwiperChange(e) {
      this.current = e.detail.current;
    }
  }
};
</script>

<style>
.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #f0f0f0;
}
.indicator {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.dot {
  width: 8px;
  height: 8px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
}
.dot.active {
  background-color: #007aff;
}
</style>
回到顶部