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
你好,可以详细说一下是如何操作的吗?
更多关于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: 可以的