3***@qq.com
3***@qq.com
  • 发布:2024-10-31 16:40
  • 更新:2024-11-01 15:02
  • 阅读:54

【报Bug】APP端的swiper-item里面 内容多的时候 swiper没有橡皮筋效果了

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.7.12

手机系统: Android

手机系统版本号: Android 14

手机厂商: 小米

手机机型: xiaomi14

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="content">  
        <view class="scrollBox" >  
            <swiper :vertical="true" :circular="false" class="swiper">  
                <swiper-item class="swiperItem">  
                    <scroll-view :scroll-y="true" class="scrollView" :scroll-with-animation="false" :lower-threshold="150" :enable-passive="true"  
                        :bounces="true" :enhanced="true" :scroll-anchoring="true" :clip="false" type="list">  
                        <view class="item" v-for="i in 20" :key="i">  
                            <image class="img" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" mode="widthFix"></image>  
                        </view>  
                    </scroll-view>  
                </swiper-item>  
            </swiper>  
        </view>  
    </view>  
</template>  

<style lang="scss" scoped>  
    .content{  
        width: 100%;  
        height: 100vh;  
        overflow: hidden;  
        .scrollBox{  
            height: 300px;  
            margin-top: 50px;  
            background-color: pink;  
            swiper{  
                height: 300px;  
                width: 100%;  
            }  
            .swiperItem{  
                height: 300px;  
                padding: 20rpx 20rpx;  
                box-sizing: border-box;  
                overflow: auto;  
            }  
            .scrollView{  
                height: 100%;  
                overflow: auto;  
                position: relative;  
                .item{  
                    background-color: #fff;  
                    padding: 20rpx;  
                    box-sizing: border-box;  
                    .img{  
                        width: 50%;  
                        margin: 0 auto;  
                        display: block;  
                    }  
                }  
            }  
        }  
    }  
</style>

操作步骤:

滑到最底部 继续上拉没有出现swiper那种橡皮筋效果

预期结果:

希望下滑还是上拉 都出现swiper的弹性效果

实际结果:

滑到最底部 继续上拉没有出现swiper那种橡皮筋效果

bug描述:

垂直方向的swiper里面包裹了一个scroll-view,里面的内容过多时,滑到最下面,继续上拉 swiper没有橡皮筋那种效果了,在顶部下滑是有的

2024-10-31 16:40 负责人:无 分享
已邀请:
3***@qq.com

3***@qq.com (作者)

找着问题了,将scroll-view和最后一个item的padding去掉就好了【&:last-child{padding: 0;}】,谁知道这是什么原因啊

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

    有问题 数据一旦变得多了 还是不行

    2024-11-02 17:49

要回复问题请先登录注册