uni-app swiper组件中swiper-item个数动态减少后,基座调试和打包测试会出现滑动后swiper白屏不显示问题

uni-app swiper组件中swiper-item个数动态减少后,基座调试和打包测试会出现滑动后swiper白屏不显示问题

测试过的手机:

  • 华为P40

操作步骤:

  • 只有在真机基座调试和打包后测试会出现,pc运行正常

预期结果:

  • 根据代码看不应该有swiper-item动态减少后滑动出问题

实际结果:

  • swiper-item动态减少后滑动出问题

bug描述:

<template>  
    <view class="container">  
        <swiper class="swiper" :current="activeIndex" :indicatorDots="true" @change="swiperChange">  
            <swiper-item v-for="item in list" :key="item.id" class="swiper_item" :style="{ backgroundColor: item.color }">  
                {{ item.name }}  
            </swiper-item>  
        </swiper>  
        <button class="btn" @click="del">删除当前swiper-item</button>  
    </view>  
</template>  

<script setup>  
import { ref } from 'vue'  
const activeIndex = ref(0)  
const list = ref([  
    { name: '红色', color: 'red', id: 11 },  
    { name: '绿色', color: 'green', id: 22 },  
    { name: '蓝色', color: 'blue', id: 33 },  
    { name: '粉色', color: 'pink', id: 44 },  
    { name: '黄色', color: 'yellow', id: 55 }  
])  
const swiperChange = e => {  
    activeIndex.value = e.detail.current  
}  
const del = () => {  
    list.value.splice(activeIndex.value, 1)  
}  
</script>  

<style lang="scss" scoped>  
.swiper_item {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    font-size: 58rpx;  
    color: #fff;  
}  
.btn {  
    margin: 50rpx 100rpx;  
}  
</style>  
产品分类 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 手机系统 页面类型 vue版本 打包方式 项目创建方式
uniapp/App Mac macOS14.3 正式 4.24 全部 vue vue3 云端 HBuilderX

更多关于uni-app swiper组件中swiper-item个数动态减少后,基座调试和打包测试会出现滑动后swiper白屏不显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

你好,可以详细说一下是如何操作的吗?

更多关于uni-app swiper组件中swiper-item个数动态减少后,基座调试和打包测试会出现滑动后swiper白屏不显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好,根据你的代码似乎是因为,当你选择最后一张轮播图时进行删除,会产生白色空白
你可以通过修改activeIndex来解决:
const del = () => {
list.value.splice(activeIndex.value, 1)
if(activeIndex.value == list.value.length){
activeIndex.value = 0
}
}

您好!感谢回复。

您提到在删除最后一张轮播图时activeIndex.value需要重新赋值确实是应该的,但是我目前遇到的现象是删除第一张或者非最后一张轮播图后,swiper的分页小圆点消失,随后在swiper组件上任意滑动,就出会白屏。

回复 o***@dingtalk.com: 你好,这个微博视频我这加载不出来,你可以打包成zip发送到评论区吗?

回复 o***@dingtalk.com: 你好,我这看到了你的问题,我们会排查看一下问题出在哪的

回复 DCloud_UNI_yuhe: 好的,录屏压缩包已上传评论区,微博在线播放链接也可查看了。

这是问题现象的录屏压缩包

你好,先给您个临时解决方法,具体问题解决需要之后确定后修复
<template>
<view class="container">
<view v-if="show">
<swiper circular class=“swiper” :current=“activeIndex” :indicatorDots=“true” @change=“swiperChange”>
<swiper-item v-for="item in list" :key="item.id" class="swiper_item" :style="{ backgroundColor: item.color }">
{{ item.name }}
</swiper-item>
</swiper>
</view>

    <button class="btn" @click="del">删除当前swiper-item</button>    
</view>    
</template> <script setup> import { ref,nextTick } from 'vue' const activeIndex = ref(0) const list = ref([ { name: '红色', color: 'red', id: 11 }, { name: '绿色', color: 'green', id: 22 }, { name: '蓝色', color: 'blue', id: 33 }, { name: '粉色', color: 'pink', id: 44 }, { name: '黄色', color: 'yellow', id: 55 } ]) const swiperChange = e => { activeIndex.value = e.detail.current } const show = ref(true) const del = () => { show.value = false list.value.splice(activeIndex.value, 1) if(activeIndex.value == list.value.length){ activeIndex.value = 0 } nextTick(()=>{ show.value = true }) } </script> <style lang="scss" scoped> .swiper_item { display: flex; justify-content: center; align-items: center; font-size: 58rpx; color: #fff; } .btn { margin: 50rpx 100rpx; } </style>

好的,如果之后有更好的解决方案,希望能在这里回复一下~

回复 o***@dingtalk.com: 可以的

回到顶部