uni-app 使用Swiper组件时上下滚动播放出现重叠和空白问题（微信小程序和苹果手机真机模拟）

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

uni-app 使用Swiper组件时上下滚动播放出现重叠和空白问题（微信小程序和苹果手机真机模拟）

开发环境 版本号 项目创建方式
Windows HBuilderX
windows 64
4.24
1.06
2.30.4

示例代码：

<swiper style="position:relative;height:40rpx;" autoplay="true" :interval="params.scroll*1000" vertical="true" class="itemlist" circular="true">  
<swiper-item class="item" v-for="item in data" :key="item.id"  
style="{fontSize:(params.fontsize*2.2)+'rpx'}" @click="goto" :data-url="item.hrefurl">
    <view  class="swiper-content">{{item.title}}</view>
</swiper-item>
</swiper>

操作步骤：

  • 数据是动态获取，循环的

预期结果：

  • 正常是如果多条，一条一条上下滚动，并不是好几天堆在一起滚动，还出现空白

实际结果：

  • 重叠，会有空白

bug描述：

<swiper style="position:relative;height:40rpx;" autoplay="true" :interval="params.scroll*1000" vertical="true" class="itemlist" circular="true">  
<swiper-item class="item" v-for="item in data" :key="item.id"  
style="{fontSize:(params.fontsize*2.2)+'rpx'}" @click="goto" :data-url="item.hrefurl">
    <view  class="swiper-content">{{item.title}}</view>
</swiper-item>
</swiper>  

上下滚动的时候，第一次滚动可以正常显示，当第二次滚动的时候，就出现了重叠和空白


Harmonyos Next教程
1 回复

在使用uni-app开发微信小程序时，遇到Swiper组件在上下滚动播放时出现重叠和空白问题，通常是由于样式设置不当或Swiper组件内部元素的高度计算不准确导致的。以下是一个可能的解决方案，通过代码示例来展示如何调整Swiper组件的样式和内部元素的高度，以解决上下滚动播放时出现的重叠和空白问题。

代码示例

  1. 页面模板（template）
<template>
  <view class="container">
    <swiper
      class="swiper"
      indicator-dots="false"
      autoplay="true"
      interval="3000"
      duration="500"
      vertical="true"
      circular="true"
    >
      <swiper-item v-for="(item, index) in items" :key="index">
        <view class="swiper-item" :style="{ height: itemHeight + 'px' }">
          <image :src="item.image" class="swiper-image" mode="aspectFill"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>
  1. 页面样式（style）
<style scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.swiper {
  width: 100%;
  height: 100%; /* 根据实际情况调整高度 */
}

.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 初始化内部元素的高度，这里通过data中的itemHeight动态设置 */
}

.swiper-image {
  width: 100%;
  /* height: 100%; 不建议这样设置，因为会导致图片拉伸 */
  object-fit: cover; /* 保持图片比例填充 */
}
</style>
  1. 页面脚本（script）
<script>
export default {
  data() {
    return {
      items: [
        { image: 'path/to/image1.jpg' },
        { image: 'path/to/image2.jpg' },
        { image: 'path/to/image3.jpg' },
      ],
      itemHeight: 300, // 根据实际情况调整每个swiper-item的高度
    };
  },
};
</script>

说明

  1. Swiper组件的vertical属性：设置为true以实现上下滚动。
  2. circular属性：设置为true以实现无缝循环滚动。
  3. 动态高度：通过itemHeight变量动态设置每个swiper-item的高度，确保每个轮播项的高度一致，避免重叠和空白。
  4. 图片样式：使用object-fit: cover来保持图片的比例填充，避免图片拉伸变形。

以上代码示例提供了一个基本的解决方案，根据实际情况，你可能需要进一步调整样式和高度设置，以确保Swiper组件在上下滚动播放时能够正确显示。

回到顶部