uni-app swiper在vue3中动态更新数据小于老数据时 触碰滑动点击导致空白

uni-app swiper在vue3中动态更新数据小于老数据时 触碰滑动点击导致空白

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

<template> <view> <page-head title="swiper,可滑动视图"></page-head> <view class="uni-margin-wrap"> <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"> <swiper-item v-for="(item,index) in background" :key="index"> <view style="display: block; height: 300rpx; line-height: 300rpx; text-align: center;" :class="item">{{index}}</view> </swiper-item> </swiper> </view> <button @click="click(1)">切换1个数据</button> <button @click="click(2)">切换2个数据</button> <button @click="click(3)">切换3个数据</button> <button @click="click(4)">切换4个数据</button> <view class="swiper-list"> <view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell-db">指示点</view> <switch :checked="indicatorDots" @change="changeIndicatorDots" /> </view> <view class="uni-list-cell uni-list-cell-pd"> <view class="uni-list-cell-db">自动播放</view> <switch :checked="autoplay" @change="changeAutoplay" /> </view> </view> 
    <view class="uni-padding-wrap">  
        <view class="uni-common-mt">  
            <text>幻灯片切换时长(ms)</text>  
            <text class="info">{{duration}}</text>  
        </view>  
        <slider @change="durationChange" :value="duration" min="500" max="2000" />  
        <view class="uni-common-mt">  
            <text>自动播放间隔时长(ms)</text>  
            <text class="info">{{interval}}</text>  
        </view>  
        <slider @change="intervalChange" :value="interval" min="2000" max="10000" />  
    </view>  
</view>
</template> <script> export default { data() { return { background: ['uni-bg-red', 'uni-bg-green', 'uni-bg-blue'], indicatorDots: true, autoplay: true, interval: 2000, duration: 500 } }, methods: { changeIndicatorDots(e) { this.indicatorDots = !this.indicatorDots }, changeAutoplay(e) { this.autoplay = !this.autoplay }, intervalChange(e) { this.interval = e.detail.value }, durationChange(e) { this.duration = e.detail.value }, click(e){ let backgroundList=[] let index = 0; while (index < e) { backgroundList.push('uni-bg-red') index++ } 
            this.background=backgroundList  
        }  
    }  
}
</script> <style> .uni-margin-wrap { width:690rpx; width: 100%; } .swiper { height: 300rpx; } .swiper-item { display: block; height: 300rpx; line-height: 300rpx; text-align: center; } .swiper-list { margin-top: 40rpx; margin-bottom: 0; } .uni-common-mt{ margin-top:60rpx; position:relative; } .info { position: absolute; right:20rpx; } .uni-padding-wrap { width:550rpx; padding:0 100rpx; } </style>

更多关于uni-app swiper在vue3中动态更新数据小于老数据时 触碰滑动点击导致空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

兄弟我也遇到和你差不多相似的问题 有解决方案了嘛？

更多关于uni-app swiper在vue3中动态更新数据小于老数据时 触碰滑动点击导致空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


看业务逻辑吧 我在change和onAnimationfinish里判断 return暂时解决了

在uni-app中使用swiper组件时，如果动态更新swiper的数据且新数据少于旧数据，可能会导致在滑动或点击时出现空白页面或索引越界的问题。这通常是由于swiper的当前项索引没有随着数据更新而正确调整所导致的。

以下是一个示例代码，展示了如何在Vue 3中使用uni-app的swiper组件，并在数据更新时正确处理swiper的当前项索引。

首先，确保你的项目中已经安装了uni-app并配置了Vue 3环境。

<template>
  <view>
    <button @click="updateData">Update Data</button>
    <swiper
      :autoplay="false"
      :indicator-dots="true"
      :current="currentIndex"
      @change="swiperChange"
    >
      <swiper-item v-for="(item, index) in swiperData" :key="index">
        <view>{{ item }}</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const swiperData = ref(['Item 1', 'Item 2', 'Item 3']);
    const currentIndex = ref(0);

    const updateData = () => {
      // 模拟数据更新，新数据少于旧数据
      swiperData.value = ['Item 1', 'Item 2'];
      
      // 调整currentIndex以避免索引越界
      if (currentIndex.value >= swiperData.value.length) {
        currentIndex.value = swiperData.value.length - 1;
      }
    };

    const swiperChange = (event) => {
      currentIndex.value = event.detail.current;
    };

    onMounted(() => {
      // 初始化swiper的current索引，如果需要的话
    });

    return {
      swiperData,
      currentIndex,
      updateData,
      swiperChange,
    };
  },
};
</script>

<style>
/* 添加一些样式以更好地展示swiper */
swiper {
  width: 100%;
  height: 300px;
}
swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
}
</style>

在这个示例中，我们定义了一个swiperData数组来存储swiper的数据，并使用currentIndex来跟踪当前显示的swiper项。当点击按钮触发updateData函数时，我们更新swiperData并检查currentIndex是否越界，如果越界则将其调整为新数据的最后一个索引。同时，我们监听swiper的change事件来更新currentIndex。

这种方法确保了swiper在数据更新后能够正确显示内容，并避免了因数据减少而导致的空白页面或索引越界问题。

回到顶部