uni-app的swiper组件current属性指定初始值无效。

uni-app的swiper组件current属性指定初始值无效。

开发环境 版本号 项目创建方式
Windows 22000.2295
HBuilderX 3.97
手机系统 版本号 厂商
Android Android 10 小米
手机机型
red mi 8

示例代码：

<swiper   
    :current="2"  
>
    <swiper-item   
        v-for="(item,index) in 7"   
        :key="index"  
    >
        <view style="height: 1000rpx;">
            <text style="font-size: 60rpx;">{{ index }}</text>
        </view>
    </swiper-item>
</swiper>

操作步骤：

见代码。不是组件，以及组件，都不行。

预期结果：

指定current为2，默认显示swiper-item 的第二个

实际结果：

仍然显示第0个

bug描述：

swiper组件设置默认的current无效。 官方看到能不能给个答复，我好几个提问都不理人，我写得那么详细也不理人吗


更多关于uni-app的swiper组件current属性指定初始值无效。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

HBuilderX 3.98.2023112011-alpha 已修复。

更多关于uni-app的swiper组件current属性指定初始值无效。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢告知，谢谢

uni-app-x确实存在上述问题（真别轻易尝试新的技术，不完善，容易踩雷。即使是传统的uni在我看来也是不完善的）

哎，本来想吐槽官方的，算了，一言难尽。

bug 已确认。

谢谢告知，感谢。

这个bug还不明显吗？官方也不理人的吗

贴了你的代码 显示 2 没问题

是uni-app-x吗

手机端调试确实有问题

我也遇到了，pc浏览器没问题，手机上current改变了后视图没有跟着滑动，太坑了

在使用 uni-app 的 swiper 组件时，current 属性用于指定初始显示的滑块索引。如果你发现 current 属性设置无效，可能是以下几个原因导致的：

1. 数据绑定问题

确保 current 属性是动态绑定的，并且绑定的值是正确的。例如：

<template>
  <swiper :current="currentIndex">
    <swiper-item>1</swiper-item>
    <swiper-item>2</swiper-item>
    <swiper-item>3</swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 1 // 初始显示第二个滑块
    };
  }
};
</script>

2. current 值超出范围

确保 current 的值在 swiper-item 的索引范围内。例如，如果有 3 个 swiper-item，current 的值应该在 0 到 2 之间。

3. swiper 组件的 current 属性是只读的

swiper 组件的 current 属性是只读的，不能直接通过修改 current 的值来改变当前显示的滑块。如果需要动态改变当前显示的滑块，可以使用 swiper 组件的 change 事件和 current 属性结合使用。

<template>
  <swiper :current="currentIndex" [@change](/user/change)="onSwiperChange">
    <swiper-item>1</swiper-item>
    <swiper-item>2</swiper-item>
    <swiper-item>3</swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 1 // 初始显示第二个滑块
    };
  },
  methods: {
    onSwiperChange(e) {
      this.currentIndex = e.detail.current;
    }
  }
};
</script>
回到顶部