2***@qq.com
2***@qq.com
  • 发布:2023-02-16 14:08
  • 更新:2023-02-17 11:17
  • 阅读:414

【报Bug】swiper组件 会显示下一个swiper-item的边

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 教育版 21H2 19044.2604

HBuilderX类型: 正式

HBuilderX版本号: 3.5.3

第三方开发者工具版本号: Stable 1.06.2209190

基础库版本号: 2.30.0

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="bg">  
        <view class="banner">  
            <view class="uni-margin-wrap">  
                <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"  
                    :current="sIndex" :duration="duration">  
                    <swiper-item v-for="(item, index) in bannerList" :key="index">  
                        <view class="swiper-item">  
                            <view class="img" :style="{'background-color': item}"></view>  
                        </view>  
                    </swiper-item>  
                </swiper>  
            </view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

                sIndex: 0,  
                indicatorDots: false,  
                autoplay: false,  
                interval: 3000,  
                duration: 100,  

                bannerList: [  
                    '#fff',  
                    '#000'  
                ],  

            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .bg{  
        background-color: #eeecf9;  
        min-height: 100vh;  
        padding-top: 10vh;  
        box-sizing: border-box;  
    }  

    .banner{  
        width: 90%;  
        height: 25vh;  
    }  

    .uni-margin-wrap {  
        width: 100%;  
        height: 100%;  
    }  

    .swiper {  
        height: 100%;  
    }  

    .swiper-item {  
        height: 100%;  
    }  
    .img{  
        width: 100%;  
        height: 100%;  
    }  
</style>  

操作步骤:
  1. Hbuilder 新建 uniapp 项目 默认模板 vue2
  2. 将代码示例 全选 覆盖粘贴到项目下 pages/index/index.vue 该文件
  3. 运行项目至微信开发者工具,切换至 iPhone X 机型查看

预期结果:

如附件所示

实际结果:

如附件所示

bug描述:

用容器包裹住swiper组件,设置容器的宽度为特定的几个值,比如90%,94%,98%,在微信开发者工具上选择 iPhone X 查看,会看到下一个swiper-item的边边,具体如附件所示(第一张白色,第二张黑色,在第一张的时候,可以看到第二张的边边)

2023-02-16 14:08 负责人:无 分享
已邀请:
DCloud_UNI_LXH

DCloud_UNI_LXH

使用百分比确实有可能会出现这样的问题,调整到看不到黑边,或者使用具体的px值

  • 2***@qq.com (作者)

    很感谢您的回答,我想再请问一下,这个算是swiper组件内百分比宽度计算精准度(百分比转具体px?)的问题吗,我个人目前的猜测,因为如果都按照css的百分比解析应该不会有问题的吧

    2023-02-20 11:56

  • 1***@163.com

    回复 2***@qq.com: 我也遇到了这个情况了, 你后来解决了吗?咋解决的?

    2023-05-16 13:25

  • 2***@qq.com (作者)

    回复 1***@163.com: 这个社区我没怎么上(捂脸笑),上面是我的猜测,百分比转的px可能有误差,后面就是像楼主说的调整到看不到黑边,目前暂时没有去做细致的调整

    2023-06-01 15:50

要回复问题请先登录注册