加油吧打工仔

发布：2024-08-17 13:46
更新：2024-08-20 10:58
阅读：300

【报Bug】swiper组件中swiper-item个数动态减少后，在基座调试和打包测试会出现滑动后swiper白屏不显示问题

分类：uni-app

bug已确认

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： macOS14.3

HBuilderX类型：正式

HBuilderX版本号： 4.24

手机系统：全部

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

测试过的手机：

华为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>

2024-08-17 13:46 负责人:无分享

4 个回复

DCloud_UNI_yuhe

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

DCloud_UNI_yuhe

你好，根据你的代码似乎是因为，当你选择最后一张轮播图时进行删除，会产生白色空白

你可以通过修改activeIndex来解决：

const del = () => {    
    list.value.splice(activeIndex.value, 1)  
    if(activeIndex.value == list.value.length){  
        activeIndex.value = 0  
    }  
}

加油吧打工仔 (作者)

您好！感谢回复。

操作录屏链接：https://video.weibo.com/show?fid=1034:5069133537280044

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

2024-08-19 17:31
DCloud_UNI_yuhe

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

2024-08-19 18:11
DCloud_UNI_yuhe

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

2024-08-19 20:13
加油吧打工仔 (作者)

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

2024-08-20 10:27

加油吧打工仔 (作者) - 认真做事的人！

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

uni-swiper问题.mp4_.zip

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>

加油吧打工仔 (作者)

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

2024-08-20 11:30
DCloud_UNI_yuhe

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

2024-08-20 11:34

要回复问题请先登录或注册

【报Bug】swiper组件中swiper-item个数动态减少后，在基座调试和打包测试会出现滑动后swiper白屏不显示问题

测试过的手机：

操作步骤：

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

预期结果：

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

实际结果：

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

bug描述：

4 个回复

公告

相关问题

【报Bug】swiper组件中swiper-item个数动态减少后，在基座调试和打包测试会出现滑动后swiper白屏不显示问题

测试过的手机：

操作步骤： 只有在真机基座调试和打包后测试会出现，pc运行正常

预期结果： 根据代码看不应该有swiper-item动态减少后滑动出问题

实际结果： swiper-item动态减少后滑动出问题

bug描述：

与内容相关的链接

4 个回复

公告

相关问题

操作步骤：

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

预期结果：

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

实际结果：

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