uni-app APP端swiper-item内容多时 swiper失去橡皮筋效果

发布于 1周前 作者 eggper 来自 Uni-App

uni-app APP端swiper-item内容多时 swiper失去橡皮筋效果

项目信息 详细信息
产品分类 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没有橡皮筋那种效果了，在顶部下滑是有的


Harmonyos Next教程
3 回复

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


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

在uni-app中，swiper组件用于实现轮播图效果，而swiper-item则是其包含的内容项。当swiper-item的内容较多时，确实可能会遇到swiper失去橡皮筋效果（即拖拽超出边界后的弹性回弹效果）的问题。这通常是由于内容溢出或布局问题导致的。

为了解决这个问题，我们可以通过调整swiper及其子组件的样式和属性来尝试恢复橡皮筋效果。以下是一个示例代码，展示如何在uni-app中设置swiper组件，并尝试解决内容多时失去橡皮筋效果的问题。

<template>
  <view class="container">
    <swiper
      class="swiper"
      indicator-dots="true"
      autoplay="false"
      interval="3000"
      duration="500"
      current="{{current}}"
      bindchange="swiperChange"
    >
      <swiper-item v-for="(item, index) in items" :key="index" class="swiper-item">
        <view class="swiper-content">
          <!-- 这里是swiper-item的内容，可以根据需要调整样式 -->
          <text>{{item}}</text>
          <!-- 如果内容很多，可以考虑使用scroll-view来滚动查看 -->
          <scroll-view scroll-y="true" class="scroll-content">
            <view v-for="n in 50" :key="n">
              <text>Item {{index}}-{{n}}</text>
            </view>
          </scroll-view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      items: ['Item 1', 'Item 2', 'Item 3'] // 根据实际情况调整数据
    };
  },
  methods: {
    swiperChange(e) {
      this.current = e.detail.current;
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.swiper {
  width: 100%;
  height: 100%; /* 根据需要调整高度 */
}
.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 保持与swiper一致的高度 */
  overflow: hidden; /* 防止内容溢出 */
}
.swiper-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.scroll-content {
  width: 100%;
  height: 80%; /* 根据需要调整滚动区域的高度 */
  overflow-y: auto; /* 允许垂直滚动 */
}
</style>

在这个示例中，我们使用了scroll-view组件来处理swiper-item中过多的内容，使其可以滚动查看。同时，我们调整了swiper和swiper-item的样式，确保内容不会溢出，并尝试保持橡皮筋效果。如果问题依然存在，建议检查是否有其他布局或样式冲突影响了swiper的行为。

回到顶部