<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>
3***@qq.com
- 发布：2024-10-31 16:40
- 更新：2024-11-01 15:02
- 阅读：77
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.7.12
手机系统： Android
手机系统版本号： Android 14
手机厂商： 小米
手机机型： xiaomi14
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
滑到最底部 继续上拉没有出现swiper那种橡皮筋效果
滑到最底部 继续上拉没有出现swiper那种橡皮筋效果
预期结果：
希望下滑还是上拉 都出现swiper的弹性效果
希望下滑还是上拉 都出现swiper的弹性效果
实际结果：
滑到最底部 继续上拉没有出现swiper那种橡皮筋效果
滑到最底部 继续上拉没有出现swiper那种橡皮筋效果
bug描述：
垂直方向的swiper里面包裹了一个scroll-view，里面的内容过多时，滑到最下面，继续上拉 swiper没有橡皮筋那种效果了，在顶部下滑是有的
3***@qq.com (作者)
有问题 数据一旦变得多了 还是不行
2024-11-02 17:49