<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>
- 发布:2024-10-31 16:40
- 更新:2024-11-01 15:02
- 阅读:54
产品分类: 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那种橡皮筋效果
3***@qq.com (作者)
有问题 数据一旦变得多了 还是不行
2024-11-02 17:49