uniapp swiper 垂直滚动时最多显示8个条目，条数过多时上方出现空白如何解决？

在uniapp中使用swiper组件实现垂直滚动时，如果条目超过8个，上方会出现空白区域。比如有10个条目，前两个条目会显示空白，只有后8个能正常显示。尝试调整swiper的高度和样式都没解决，请问如何让所有条目都能正常显示，而不会出现上方空白？

2 回复

在swiper-item外层设置固定高度，使用scroll-view替代swiper实现垂直滚动。或者动态计算swiper高度，确保每个swiper-item高度一致。


在UniApp中，当Swiper设置为垂直滚动且条目数超过8个时，可能会出现上方空白的问题。这通常是由于Swiper的默认高度计算或样式问题导致的。以下是解决方案：

  1. 动态计算Swiper高度：根据条目数量动态设置Swiper的高度，确保每个条目高度固定且总高度正确。
  2. 使用flex布局：确保Swiper内部容器使用flex布局并正确对齐。
  3. 检查样式冲突：避免外部样式影响Swiper的渲染。

代码示例：

<template>
  <view>
    <swiper 
      :vertical="true" 
      :style="{ height: swiperHeight + 'px' }" 
      :current="currentIndex"
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in list" :key="index">
        <view class="item">{{ item }}</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 你的数据列表，假设有超过8个条目
      itemHeight: 100, // 每个条目的固定高度，根据实际样式调整
      currentIndex: 0
    };
  },
  computed: {
    swiperHeight() {
      // 计算Swiper总高度，最多显示8个条目
      const displayCount = Math.min(this.list.length, 8);
      return this.itemHeight * displayCount;
    }
  },
  methods: {
    onSwiperChange(e) {
      this.currentIndex = e.detail.current;
    }
  },
  onLoad() {
    // 示例数据，实际替换为你的数据
    this.list = Array.from({ length: 10 }, (_, i) => `条目 ${i + 1}`);
  }
};
</script>

<style scoped>
.item {
  height: 100px; /* 与itemHeight一致 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
}
</style>

关键点：

  • 动态高度：通过swiperHeight计算属性动态设置Swiper高度，限制最多显示8个条目的高度。
  • 条目高度固定：确保每个swiper-item内的条目高度一致（示例中为100px）。
  • 样式调整：使用flex布局使内容居中，避免布局错乱。

如果问题依旧，检查是否有全局样式影响，或尝试在Swiper上添加style="height: auto;"进行调试。根据实际项目结构调整高度值和样式即可解决空白问题。

回到顶部