uni-app app端 swiper每次追加数据会重新跳转到第一个swiper-item current重置成0

uni-app app端 swiper每次追加数据会重新跳转到第一个swiper-item current重置成0

测试过的手机

ip13p

操作步骤：

swiper每切换N次，向后台请求追加数据，而数据一变动，app端会重新从第一张item开始，current 直接被重置为0

预期结果：

app端跟小程序保持一致，数据追加变动，当前的current不变

实际结果：

数据追加变动，当前的current重置为0

bug描述：

swiper 滑动的时候追加数据，每次数据变化，在app端会重新跳转到第一个swiper-item，current 会重置成0，而小程序是不会的，这是组件的兼容吗，如何解决

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 Windows 11 家庭中文版
HBuilderX类型 正式
HBuilderX版本 3.99
手机系统 全部
手机厂商 华为
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app app端 swiper每次追加数据会重新跳转到第一个swiper-item current重置成0的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

感谢反馈，你提到 swiper-item 动态 push 追加之后会重置 current=0，这个问题是固定 push 到最后一项吗？我尝试复现和定位你提到的问题

更多关于uni-app app端 swiper每次追加数据会重新跳转到第一个swiper-item current重置成0的实战教程也可以访问 https://www.itying.com/category-93-b0.html


对的，每次追加数据都push到数据后面

加wx:shenhl-0321 发个样式给我，我给你解决

在 uni-app 中，当你使用 swiper 组件时，如果动态追加数据到 swiper-item 中，swiper 组件会重新渲染，导致 current 值重置为 0，即跳转到第一个 swiper-item。这是因为 swiper 组件在数据变化时会重新初始化。

要解决这个问题，你可以在追加数据之前保存当前的 current 值，然后在数据更新后手动将 swiper 的 current 设置回之前的值。以下是实现这个逻辑的示例代码：

<template>
  <view>
    <swiper :current="current" @change="onSwiperChange">
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <view>{{ item }}</view>
      </swiper-item>
    </swiper>
    <button @click="addItem">追加数据</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperList: ['Item 1', 'Item 2', 'Item 3'],
      current: 0
    };
  },
  methods: {
    onSwiperChange(e) {
      // 监听 swiper 切换事件，更新 current 值
      this.current = e.detail.current;
    },
    addItem() {
      // 保存当前的 current 值
      const currentIndex = this.current;
      
      // 追加新数据
      this.swiperList.push(`Item ${this.swiperList.length + 1}`);
      
      // 在下一个 tick 中设置回之前的 current 值
      this.$nextTick(() => {
        this.current = currentIndex;
      });
    }
  }
};
</script>

<style>
/* 样式代码 */
</style>
回到顶部